css - 为什么在有图像背景时需要 display:block ？

Question

徽标与以下代码显示良好，

但我不知道代码display:block在这里是如何工作的？

我知道如果我不使用代码，文本会与图像（徽标）重叠，但我不明白，为什么 display:block 可以解决这个问题？

的HTML：

<h1><a href="#">WebsiteName</a></h1>

CSS：

#header h1 a {
background: url(images/logo.jpg) no-repeat;
height: 21px;
width: 197px;
display: block;/* How this works? */
text-indent: -9999px;
}

score 1 · Accepted Answer

默认情况下，该<a>元素是内联元素。内联元素不能有固定的宽度或高度。

通过添加display: block;，您可以使元素成为块级，从而可以设置其大小。

score 1 · Accepted Answer

因为 a 不是块级元素，您不能在其上设置宽度。块 vs 内联对于理解 CSS 非常重要，所以你真的应该花一些时间来熟悉这个概念。

这是一个非常重要的组成部分（对双关语感到抱歉）

2 回答 2