html - 一个div未分配空间的故事

Question

This fiddle讲述了一个孤独的div的故事。有一天，内联 img 访问了孤独的 div。他们成了好 friend 。但是无论 img 做了什么，它都无法填补 div 的空白，因此孤独的 div 仍然很沮丧:

HTML:

<div><img src="..."></img></div>

CSS:

div {

    background-color: red;
    display: inline-block;
    width: 16px;
    height: 16px;
    overflow: hidden;
}

img {
    display: inline-block;
    height: 16px; 
    width: auto;
    position: relative;
    background-color: green;
}

说，谁能治愈 div 的空虚感？

更新:原始 fiddle 可以找到here .

Answer 1

当我将“line-height: 0”添加到包含的 div 时，问题在你的 jsfiddle 中得到解决。