我以为我理解内联和块元素是如何工作的,但是这引起了我的兴趣.我找到了解决问题的方法,但我不知道为什么会这样.
出于某种原因,如果你在div中有一个img,div就比图像高3.5px.但是,如果将图像设置为块元素,则此额外高度将消失.
基本HTML：
<div id="wrapper">
<img src="http://www.basini.com/wp-content/uploads/2013/02/seeing-in-the-dark.jpg" width="300" height="230" />
</div>
而CSS：
#wrapper {
background: orange;
}
#wrapper img {
/* display: block; this will remove the extra height */
}
我已经设置了jsfiddle to demonstrate the effect
为什么会发生这种情况,以及为什么将’img’作为块元素来修复它？还有其他解决方案吗？
解决方法
默认情况下,图像以内嵌方式呈现,就像字母一样.
它位于a,b,c和d所在的同一条线上.
在j,p和q等字母上找到的下降线下方有一个空格.
您可以调整图像的垂直对齐方式以将其放置在其他位置.
