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

Question

为什么图像的父 div 底部有一些额外的像素。如何在不硬编码父 div 高度的情况下删除像素。

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%;
}

score 47 · Accepted Answer

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

score 7 · Accepted Answer

一种方法是设置display:block，img使其填充父级。

jsFiddle 这里- 它的工作原理。

img {
    width:100%;
    display:block;
}

或者，如果您不喜欢这种方法，您也可以更改垂直对齐方式，默认为baseline.

2 回答 2