html - 基于子图像高度的 DIV 高度在底部添加了一些额外的像素

Question

为什么图片的父div底部多了几个像素。如何在不对父 div 高度进行硬编码的情况下删除像素。

http://jsfiddle.net/6x8Dm/

HTML

<div class="wrapper">
    <div class="column">
        <img src="http://www.lorempixel.com/200/200/" />
    </div>    
</div>  

CSS

.wrapper {
    width:200px;
    margin:0 auto;
}
.column {
    width:100%;
    background:#cc0000;
}

img {
    width:100%;
}

Answer 1

该空间实际上是字体中下行元素的结果。您可以通过多种方式摆脱它:

• 为图像添加一个vertical-align:top 规则 jsFiddle example
• 将font-size:0; 添加到包含的div jsFiddle example
• 添加display:block;到图像 jsFiddle example