为什么 'div>a>img' 的高度大于包裹的 img 的大小？答案

【问题标题】：Why is the height of a 'div>a>img' larger than the size of the wrapped img?为什么 'div>a>img' 的高度大于包裹的 img 的大小？
【发布时间】：2011-09-26 11:20:13
【问题描述】：

如果我将 img 的大小设置为 100*100，则包含的 div 将类似于 100*106。

额外的“6px”从何而来？这种行为如何符合标准？

【问题讨论】：

stackoverflow.com/a/31445364/3597276

标签： css dom

【解决方案1】：

@克莱德;是的，这是图像的一种自然行为，因为 img 是一个内联元素，因此用户代理会为下行字符留出一些空间。

您可以使用 css 将其删除：

img { display:block; } or img { vertical-align:bottom; }

Unwanted padding-bottom of a div

【讨论】：

此外，由于img 元素位于锚点（a 元素）内，它可能应用了其他样式，这导致锚点占用的空间比单独的图像更多。你可能想试试a img { border: none; } a:link {text-decoration: none; border: none}。
谢谢！内联元素中降序字符的空间！
今天早上我被绊倒的时间比我想承认的要长得多。感谢发帖！

【解决方案2】：

我认为我们需要更多代码，尤其是 CSS 样式，但本质上 CSS 的级联部分可以轻松地将继承的大小向下流动。如果您的 A 具有一些额外填充或边距的样式，那么您的最终 DIV 也会得到它。 A 是一个内联元素，它经常添加填充以预期更多内容；将 A 变为块通常可以解决这类问题，所以我会先尝试。

【讨论】：