为什么这段代码中图片下方有空白间隙？

Question

我有以下代码，它允许红色从a元素中透出来。为什么会这样呢？我原本以为a元素只会扩展到内容的大小，但看起来它比那还要大一点。在这里查看codepen：http://codepen.io/anon/pen/soqEz。

HTML

<a href="#"><img src="http://placehold.it/150x150" /></a>

CSS

a{
  background: red;
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:0;
}
img {
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:0;
}

编辑：我看到下面的回答了...但是有人能否解释一下为什么这个空格根本存在（我的意思是，既然它是块级元素...那么它在第一次出现时的目的是什么）...而不是试图摆脱它。谢谢。

- byronyasgur

---

根据您的问题编辑，原因在上面评论中由@Quentin和我自己提供的两个链接答案中已经解释清楚了。 - ajp15243

Answer 1

img元素默认为inline。 inline元素作为文本显示，默认为vertical-align: baseline。这意味着图像的底部与文本的底部对齐。请注意，小写字母p或g会低于垂直文本对齐的底部。您可以通过添加vertical-align: bottom或display: block来解决此问题。

- Daniel Moses

---

默认情况下，图像是inline-block而不是inline。 - cimmanon

@cimmanon 我的浏览器默认为 inline。inline-block 的源代码在哪里？ - Daniel Moses

内联元素不遵守像 margin、height 或 width 这样的属性，而内联-* 元素则会遵守。 - cimmanon

@cimmanon - 不，它们是“替换内联”，而不是“内联块”。 “内联块”框具有可能影响框基线的内部结构，“替换内联”具有不透明的内部结构，但除此之外，它们将遵守您提到的属性，类似于“内联块”，而不像“非替换内联”。 - Alohci

例如，在http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins中，可以看到替换和非替换的内联框架的宽度属性处理要求非常不同。 - Alohci

Answer 2

这是因为它是一个行内元素。更改显示类型即可解决。

img {
    display:block;
}

- Kevin Lynch

Answer 3

因为默认情况下图像是一个内联元素。将 display: block 添加到你的 img 规则中并查看效果。

- Ejaz

Answer 4

在您的情况下，您需要添加display:block，但是添加到图像标签而不是链接标签。

img
{
display:block;
}

- trajce