HTML5奇怪的 img 总是在底部添加3px 的边距

当我把我的网站改成

<!DOCTYPE HTML>

包装在 DIV 中的每个 img 元素都有一个3px 的底部边距，即使这个底部边距没有在 CSS 中定义。换句话说，没有任何样式属性会导致3px 的底部边距。

<div class="placeholder">
<img alt="" src="/haha.jpg" />
</div>

假设 jpg 是50x50。占位符设置为 display: table。奇怪的是。据我观察，占位符是50x53..。

以前有人遇到过这种异常现象并修复它吗？

剪辑

这是 JS 小提琴

Http://jsfiddle.net/frpk6/

60337 次浏览
小开

我不确定为什么会发生这种情况，但是给你的占位符 div font-size: 0px;

.placeholder {
font-size: 0px;
}
小开
最佳答案

这个问题是由于图像的行为像一个文本字符(因此在它下面留下一个空格，“ y”或“ g”的悬挂部分将去) ，并通过使用 vertical-align CSS 属性来表明不需要这样的空格来解决。几乎任何值的 vertical-align都可以; 我个人喜欢 middle。

img {
vertical-align: middle;
}

http://jsfiddle.net/fRpK6/1/

小开

我经常通过给图像元素 display:block或者 display:inline-block来解决这个问题。

小开

不知道确切的问题是什么，但我已经尝试了这与2个不同的选项，首先应用类的 img 标签这将工作，第二应用字体大小0像素;

Http://jsfiddle.net/frpk6/3/

小开

我相信

line-height: 1;

也会解决这个问题，特别是如果它是在一个块本身。

小开

解决了我的问题。

line-height: 0;
小开

它也发生与堆积 divs，只要添加 float属性。 例如:

<body>
<div class="piledUpDiv">Some text</div>
<div class="piledUpDiv">Some text</div>
<div class="piledUpDiv">Some text</div>
</body>

有问题的 CSS:

.piledUpDiv{
width:100%;
display:inline-block;
}

解决方案:

.piledUpDiv{
width:100%;
display:inline-block;
float:left;
}
小开

应用 display: block的图像修复它，我有这个问题的图像内浮动的 div。

小开

也许是空白的问题导致了这种情况。 因此，下面的方法可能是有用的

img {
display: block;

} 或者

img {
vertical-align: top/middle/...;

}

或者

.placeholder {
font-size: 0;

}

小开

对我来说，这是

font-size: 0px;
line-height: 0;

在包装盒上发现的。

小开

在我的特殊情况下，以上所有解决方案都不起作用。

我用 display: flex;包装了 div。

我设法通过将: align-items: flex-start;添加到包装 div 和所有图像: display: block;来实现这一点。

在我明确告诉内容对齐之前，它搞乱了布局。在设置为弹性启动后，一切都运转良好。


提交答案