包含img的div底部多出3px

包含img的div底部多出3px

Posted on 2015-07-01

问题

当我们在html文件写出如下代码时:

<div id="app">
  <img src="xxx.jpg">
</div>

会发现div的高度会比图片的高度多出3px,而不是图片的高度

解决办法

  1. 设置img的css为 display: block
img {
  display: block;
}
  1. img设置vertical-align

    img {
      vertical-align: top / middle / bottom;
    }
    
  2. 为img标签的父级元素设置font-size: 0

    #app {
      font-size: 0;
    }
    

原因

这个问题是由于图像的行为类似于文本的一个字符,会导致预留空间