在前端开发中,经常遇到在一个img外面套div的时候,div的大小和img的大小并不一样,在底部会有一段空白.
代码如下:
<div>
<img src = ''imgs/1.jpg ''/ >
</div>
原因:img图片默认的vertical-align是baseline.而baseline又和父级底边有一定距离(这个距离和font-size,font-family有关),一个inline-block的元素,如果里面没有inline元素,或者overflow不是visible,则该元素的基线就是其margin底边缘,否则,则基线就是元素里面最后一行内联元素的基线.
方法:
1.将img图片的display:block
2.将div的line-height设置的足够小
3.将容器里的fontsize设置为0
4.将vertical-align设置为middle,bottom,top,只要不取baseline即可
相关:
1.IE的显示有几种模式,假如声明为Strict模式,IE以W3C显示文档,而W3C里img默认inline,除非自己声明block
2.空隙是ie针对盒模型默认的line-height和font-size.给img display:block虽然能解决问题,但并没从结构上考虑问题