为什么图片的父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%;
}
最佳答案
该空间实际上是字体中下行元素的结果。您可以通过多种方式摆脱它:
- 为图像添加一个
vertical-align:top
规则 jsFiddle example - 将
font-size:0;
添加到包含的div jsFiddle example - 添加
display:block;
到图像 jsFiddle example
关于html - 基于子图像高度的 DIV 高度在底部添加了一些额外的像素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19212352/