基于子图像高度的DIV高度在底部增加了几个额外的像素

为什么图像的父级div在底部具有一些额外的像素。我如何删除没有硬编码的父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%; 
}

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

2013-10-06 18:32:55 j08691

@JoshC真的很有趣的答案。我想这个边距是因为缺少图像时的替代文本。你对这个额外像素背后的原因有任何想法吗？原因？ –

@AdrianFlorescu - 不，间距（不是边距）在那里，因为默认情况下图像就像内联元素，并且空间是为下边元素（例如g，y，j）保留的。 – j08691

OMG这个工程！：D –

一种方式是通过在img设置display:block，导致它填补了父母。

jsFiddle here - 它的工作原理。

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

另外，如果你不喜欢这种方法，你也可以改变垂直对齐，因为默认为baseline。

2013-10-06 18:32:36

嗯...很酷！那是对的！你有什么想法为什么那边缘？ –

我想象他们在创建图像标签时。他们喜欢......“我们应该在这个图像下添加一些额外的像素，如果它被包裹成一个div，并且没有显示属性或浮动被添加 - 这将是令人毛骨悚然:)）muahaha” –

回答