css - 为什么显示:block necessary when there is a image background?

Question

Logo 与下面的代码显示良好，

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

我知道如果我不使用代码，文本会与图像( Logo )重叠，但我不明白，为什么 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;
}

Answer 1

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

通过添加display: block; ，您可以将元素设置为 block 级，这样您就可以设置其大小。