为什么div里嵌套了img底部会有白块

Question

http://jsfiddle.net/o8dk3z4u/

Answer 1

http://jsfiddle.net/o8dk3z4u/2/

因为img默认是按基线(baseline)对齐的。对比一下图片和右边的p, q, y等字母，你会发现这三个字母的“小尾巴”和图片下方的空白一样高。下面这张图中的黑线就是那条基线。

要去掉空格可以使用vertical-align: bottom或将img标签变为块级元素。

至于什么是基线，还记得四线三格的英语写字本么？中间第三条线就是基线。

Answer 2

设置img的display属性为block就能fix这个问题了。

Answer 3

因为img 标签 是inline 元素， inline元素默认是baseline对齐的。 当baseline对齐的时候 下方会有4px 的空隙。就是你说的白块。

Answer 4

<style>
.thumb { font-size: 0; line-height: 0; }
</style>
<div class="thumb">
    <img src="http://example.com/1.gif" width="100" height="100" />
</div>

Answer 5

所有inline，inline-block都会有这个问题，该问题会受到lineheight、fontsize以及vertical-align的共同影响，不是BUG，而是对齐的标准

Answer 6

http://jsfiddle.net/bg0ogjwu/

img {
  width: 180px;  
  background: #ccc;
  height: 100%;
  /* 方案1：display:block; */
  /* 方案2：vertical-align:bottom; */
  /* 方案3：img元素设定height: 100%;  父元素设定height:180px */
}

Answer 7

就算我不知道我也一定要来插一脚！！终于找到这个问题了，不止div啊还有a包一个img一样一个留白！！！！

好了，表达完激动之情后，还是让回复有意义一些，基于一楼的回复，同时还有a标签也是同样的道理，之前的前辈其实也有讲过（点我跳转）
所以总结下，对于img标签 display:block使其变为块元素来实现对齐，或者还是依靠其行内元素的中线对齐或者底部对齐来实现消除底部空白。
再次感谢这个问题与前边各位的回答了。
以上