css - HTML 5 奇怪的 img 总是在底部添加 3px 边距

Question

当我将网站更改为

<!DOCTYPE HTML>

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

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

现在假设 haha.jpg 是 50x50，并且 .placeholder 设置为 display: table。奇怪的是 .placeholder 在我的观察中的高度尺寸是 50x53 ......

有没有人遇到过这个异常并修复它？

编辑

这是 JS FIDDLE

score 307 · Accepted Answer

这个问题是由于图像表现得像一个文本字符（因此在它下面留了一个空格，“y”或“g”的悬挂部分会去），并通过使用vertical-alignCSS 属性指示没有需要这样的空间。几乎任何价值vertical-align都可以；middle个人很喜欢

img {
    vertical-align: middle;
}

score 25 · Accepted Answer

25

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

于 2012-06-01T04:23:05.120 回答

score 6 · Accepted Answer

6

它解决了我的问题。

line-height: 0;

于 2013-12-08T00:28:35.927 回答

score 3 · Accepted Answer

我相信设置

line-height: 1;

在图像上也可以解决这个问题，特别是如果它本身就在一个块中。

score 2 · Accepted Answer

2

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

于 2015-04-12T22:53:41.700 回答

score 1 · Accepted Answer

我不确定它为什么会发生的确切解释，但是给你的占位符 div font-size: 0px;

.placeholder {
    font-size: 0px;
}

score 1 · Accepted Answer

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

img {
display: block;

} 或者

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

}

或者

.placeholder {
font-size: 0;

}

score 1 · Accepted Answer

对我来说，这是一个组合

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

在固定它的包装容器上。

score 0 · Accepted Answer

不知道确切的问题是什么，但我尝试了 2 个不同的选项，首先在 img 标签上应用类，这将起作用，然后应用字体大小 0 px；

score 0 · Accepted Answer

堆积也会发生这种情况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; 
 }

score 0 · Accepted Answer

在我的特殊情况下，上述解决方案均无效。

div我有一个包装display: flex;。

我设法通过将：添加align-items: flex-start;到包装 div 和所有图像来使其工作：display: block;。

在我明确告诉内容对齐之前，它弄乱了布局。将其设置为 flex-start 后，一切都像魅力一样。