没有高度规格,仅包含单个图像的<div>(或<p>任何其他类似元素)比它高一点.看起来它在Firefox中高4px,在Chrome中高出5px(根据Firebug及其等效的Chrome).在图像下添加了额外的空间.
显然我可以通过为div指定一个高度来解决这个问题,但是我想知道为什么那个空间存在并且有一种消除它的方法.
Tom*_* Tu 20
Image 是内联级别元素,因此它遵循行高设置,默认情况下设置在文本的基线.
如果您将图像设置为将图像vertical-align: bottom定位在下降线(文本行的最底部)
另一种选择是将图像设置为display: block并跳过所有这些内联噱头
添加到CSS:
img {display: block;}
默认情况下img有display:inline这样相关的东西全部文本行.