对于在div或ul li 中加入图片有各种空隙的小研究

其实,在正常规范代码的情况下,很少会有空隙的出现。但是即使你初始化了margin和padding,在div中加了一个图片,下面还会有那么3~5px的空隙,这是为什么?
这里写图片描述
首先,这种情况时,你没有规定div的高度height(如果你加了的高度和图片高度一致,就不用往下看了。。。。),那么浏览器就会自己算出高度,并出现了这个空隙。。
这就关系到baseline的问题了,不过这个问题我也有点蒙,等以后彻底明白了再更新,说一下各种解决方法:
1:vertical-align: bottom为img设置这个,vertical-align 属性设置元素的垂直对齐方式。
2:有一种原因,是空格回车等text造成的,解决方法:回车空格不过就是个字符,只不过我们看不见,那么把font-size设置为0,就ok了。
这里写图片描述
推荐方法2,这个方法还可以解决li display:inline后,有空隙的问题。
总之,遇到有了不该出现的空隙,就想想是不是有了看不见的空格,加font-size:0;试试~~~~
欢迎评论交流。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值