【发布时间】：2013-12-04 00:29:10
【问题描述】：
有人可以解释为什么这个标记：
<div style="border: 1px solid gray; float: left;">
<img src="fooImage.png" style="height: 2px; width: 2px;" />
</div>
渲染大约 2x18 的浮动 div（在 Chrome/Firefox 中）而不是 2x2 div？
即使删除了所有空白区域，图像也会显示为尊重font-size/line-height 而不是其内容的height（img）。
【问题讨论】：
-
@eBrian -- 好的，谢谢！
-
这对我来说也很好奇。我刚刚观察到，将 img 替换为具有相同样式属性的 div 会导致其父级以您认为的方式环绕它。
-
当block container 仅包含内联级元素时，line-height 指定容器内生成的行框的最小高度。由于图像本身会生成一个线框，因此最小高度由其容器的初始线高值决定，即 20 像素，具体取决于您的浏览器。
-
@412 -- 知道为什么我在浮动的
div中放置一个空的<span></span>时不观察一个2x18 的框吗？ -
@vpiTriumph：我很确定空元素不会生成行框。