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

【问题标题】：Strange padding between image and a span图像和跨度之间的奇怪填充
【发布时间】：2014-08-25 06:08:53
【问题描述】：

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

<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%; 不适用于第二个元素（它应该与图像的高度相同）。

【问题讨论】：

标签： html css

【解决方案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.

【讨论】：

【解决方案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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案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%;
}

【讨论】：

【解决方案5】：

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

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

或者

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

【讨论】：

【解决方案6】：

你得到空格的原因是元素之间有空格。只需删除空格即可。

【讨论】：