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 级，这样您就可以设置它的大小。