为什么“div>a>img”的高度比包裹的图像尺寸大？

Question

如果我将img的大小设置为100*100，包含它的div会变成100*106。

这额外的“6px”是从哪里来的？这个行为如何符合标准？

- Clyde

---

https://dev59.com/aV0Z5IYBdhLWcg3wbwCY#31445364 - Michael Benjamin

Answer 1

@clyde; 是的，这是图片的自然行为，因为img是内联元素，所以用户代理会留出一些空间给降部字符。

你可以使用CSS去除它：

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

想了解更多，请查看以下内容

https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

Unwanted padding-bottom of a div

- sandeep

---

此外，由于img元素位于锚点（a元素）内部，因此可能会对其应用其他样式，导致锚点占用的空间比仅有图像时更大。您可以尝试使用a img { border: none; } a:link {text-decoration: none; border: none}。 - Mikko Rantalainen

谢谢！内联元素中的下降字符空间！ - Clyde

今天早上这个问题困扰了我很久，比我想承认的时间还要长。感谢您的发布！ - Ian Pitts

Answer 2

我认为我们需要更多的代码，特别是CSS样式，但是CSS的级联部分可以很容易地将继承的大小向下流动。如果您的A具有一些额外的填充或边距样式，那么最终的DIV也会得到它。而且A是一个内联元素，通常会添加填充以预期更多内容；将A转换为块通常可以解决这些问题，因此我建议首先尝试这种方法。

- AlexanderJohannesen