Question

我有以下代码，它允许红色从一个元素显示。为什么是这样。我原以为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;
}

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

Answer 1

默认情况下，img元素为inline。 inline个元素充当文本，默认为vertical-align: baseline。这意味着图像的底部与文本的底部对齐。请注意，小写的p或g位于垂直文本对齐的底部之下。您可以通过添加vertical-align: bottom或display: block来修复此问题。

Answer 2

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

img {
    display:block;
}

Answer 3

因为默认情况下图像是inline元素。将display: block添加到您的img规则中，然后查看。

Answer 4

在您的情况下，您需要添加display：block，但是要添加到image标签而不是link标签。添加

img
{
display:block;
}

为什么此代码中的图像下方有空格？

4 个答案: