【问题标题】：HTML 5 strange img always adds 3px margin at bottom [duplicate]HTML 5奇怪的img总是在底部添加3px边距[重复]
【发布时间】：2012-06-06 08:04:13
【问题描述】：

当我将网站更改为

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

http://jsfiddle.net/fRpK6/

【问题讨论】：

这就是你应该使用重置 CSS 的原因。
你能做一个jsfiddle.net作为例子吗？包括一些你有的相关CSS？
@JamesKhoury 添加了 jsfiddle，注意黑色背景的 .placeholder 与 img 的高度不匹配。
@xbonez 我有reset.css，没关系，检查JS fiddle
等效问题：stackoverflow.com/questions/7774814/…（可能还有其他问题）

标签： css html

【解决方案1】：

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

img {
    vertical-align: middle;
}

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

【讨论】：

问题是由vertical-align: baseline引起的，这是大多数元素的默认值，表示应该保留空间。 vertical-align 的一些其他合法值也保留此空间，但 top、text-top、middle、bottom 和 text-bottom 没有。 sub 似乎也没有，但我对信任那个人持怀疑态度。
如果图像小于您的字体大小，那么这将不起作用，因为即使 div 没有保留那个“特殊”空间，它仍然会为文本保留足够的空间。在这种情况下，您必须使用 pantryfight 的建议或 display: block 来完全删除图片中的文字。
也适用于 iframe（例如，用于嵌入的 youtube 视频或谷歌地图）
2021 年仍然是最佳答案！

【解决方案2】：

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

【讨论】：

图片默认为display:inline-block；这不会做任何事情。
实际上，由于某种原因，这解决了 HTML5 的问题。就像描述的一样here，+1
不，它们是display:inline，或者更严格地说是“被替换的内联元素”
@SpliFF 好的，是的，你是对的；它的行为有点像inline-block，但它不是一回事，实际上将它设置为inline-block 确实有一些效果。（我想我应该正式承认这一点，所以你的评论停止累积投票。）
display:block 很好。但是display:inline-block 不起作用。

【解决方案3】：

解决了我的问题。

line-height: 0;

【讨论】：

这大致相当于另一个答案中提到的font-size: 0px;。

【解决方案4】：

我相信设置

line-height: 1;

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

.placeholder {
    font-size: 0px;
}

【讨论】：

是的，但这很荒谬。您仍然要求浏览器将图像视为文本字符，如果您想在其中添加其他元素，它们将继承 0px 字体大小。

【解决方案7】：

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

img {
display: block;

} 或

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

}

或

.placeholder {
font-size: 0;

}

【讨论】：

这对已发布的其他答案有何改进？

【解决方案8】：

对我来说这是一个组合

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

在固定它的包装容器上。

【讨论】：

【解决方案9】：

不确定到底是什么问题，但我已经尝试了 2 个不同的选项，首先在 img 标签上应用类，然后再应用字体大小 0 px；

http://jsfiddle.net/fRpK6/3/

【讨论】：

display: table?有用;它不是真正的跨浏览器，但我认为它适用于所有出现此问题的浏览器。嗯，我想我会为display 编译一个值列表来解决问题...block、list-item、table 和 8 个table-* 值中的任何一个，尽管你会有疯狂地使用它们中的大多数。

【解决方案10】：

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

【讨论】：

float 覆盖 display。这是一种不同的对齐方式，如果您不特别想要浮动行为，可能会导致相当混乱。

【解决方案11】：

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

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

我设法通过在包装 div 和所有图像中添加：align-items: flex-start; 和所有图像：display: block;。

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

【讨论】：

您使用的是带有flex-direction: column 和固定高度的弹性框吗？出于完全不同的原因，这将在图像之间留出空白（但不会低于最后一张）。