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

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%;
}

正如你在这个小提琴中看到的那样,我在红色和蓝色元素之间有一些空间.无论我做什么,我都无法摆脱它.另外,我很感激有人可以告诉我为什么我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%;
}

在这里看演示.