其实,在正常规范代码的情况下,很少会有空隙的出现。但是即使你初始化了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;试试~~~~
欢迎评论交流。
对于在div或ul li 中加入图片有各种空隙的小研究
最新推荐文章于 2021-06-22 01:39:39 发布