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

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

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

<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.

Answer 2

内联元素对空白区域敏感。只需删除它：

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

<强> jsFiddle example

或者

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

<强> jsFiddle example

另一种技巧是使容器元素上的字体大小为零，然后重置子项上的大小，但我不建议这样做。

Answer 3

因为您使用display:inline-block设置样式的html元素并未触及......我修复了它：http://jsfiddle.net/jalbertbowdenii/2ZNUT/1/

Answer 4

在图片的CSS中添加display:block。

在fiddle

中试用

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

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

Answer 5

获得空格的原因是因为元素之间有空格。只需删除空间。

Answer 6

为你的img应用display属性或float属性。所以css看起来像：

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

或者

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