html - 图像和跨度之间的奇怪填充

Question

我在图像和跨度之间有一个奇怪的填充，我无法摆脱。

<div>
    <img src="http://placehold.it/100x100" />
    <span>hello</span>
</div>

img{
    padding:20px;
    background: red;
}

span{
    width: 300px;
    background-color: blue;
    display: inline-block;
    vertical-align: top;
    height: 100%;
}

正如您在此 fiddle 中所见，我在红色和蓝色元素之间有一些空间。而且无论我做什么，我都无法摆脱它。另外，如果有人能告诉我为什么我的 height: 100%; 对第二个元素不起作用(它应该与图像的高度相同)，我将不胜感激。

Answer 1

有一个奇怪的填充，因为 <img> 之间有一个空格和 <span>在 html 源代码中。

<div>
    <img src="http://placehold.it/100x100" />
    <span>hello</span>
</div>

删除空格将消除填充。

<div>
    <img src="http://placehold.it/100x100" /><span>hello</span>
</div>

但这可能不是您想要的(继续阅读)。根据你的第二个问题，100% 不起作用的原因是 <div>没有给出高度，也没有什么可以作为百分比高度的基础。 <div>这里的高度是其内容高度的结果。它采用较高元素的高度，以便它可以容纳两者。

所以你真正要找的是display: table .使用表格可以很容易地并排放置图像和文本。

div {
    display: table;
}

img {
    display: table-cell;
    padding:20px;
    background: red;
}

span {
    display: table-cell;
    width: 300px;
    background-color: blue;
    vertical-align: top;
    height: 100%;
}

See demo here.