4

我有以下代码，它允许红色从 a 元素中显示出来。为什么是这样。我原以为 a 元素只会扩展到内容的大小，但看起来它比这大一点。请参阅此处的代码笔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;
}

编辑：我看到下面的答案......但任何人都可以解释为什么空间在那里（我的意思是考虑到它是一个块级元素......首先它的目的是什么）......相反试图摆脱它。谢谢

4

4 回答 4

8

该img元素是inline默认的。 inline元素充当文本，默认为vertical-align: baseline. 这意味着图像的底部与文本的底部对齐。请注意，小写的 p 或 g 位于垂直文本对齐的底部下方。您可以通过添加vertical-align: bottomOR来修复它display: block。

于 2013-04-03T19:37:20.027 回答
3

它这样做是因为它是一个内联元素。更改显示类型

img {
    display:block;
}
于 2013-04-03T19:38:21.980 回答
2

因为图像inline默认是一个元素。添加display: block到您的img规则并查看。

于 2013-04-03T19:38:33.017 回答
0

在您的情况下，您需要添加显示：块，但添加到图像标签而不是链接标签。添加

img
{
display:block;
}
于 2013-04-03T19:39:10.893 回答