Question

This fiddle讲述了孤独div的故事。有一天，内联img访问了孤独的div。他们成了好朋友。但无论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它的空虚感？

更新：可以找到原始小提琴here。

Answer 1

当我添加＆＃34; line-height：0＆＃34;时，问题在你的jsfiddle中得到修复。到包含div。

Answer 2

图像为display: inline-block，其中考虑了空白区域和线条高度。我建议将vertical-align: top;添加到图片的样式规则中。

img {
    ...
    vertical-align: top;
}

演示：http://jsfiddle.net/y7dd2qmx/

一个div的无法计算的空间的故事

2 个答案: