Question

徽标与下面的代码一起显示，

但我不知道代码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;，您可以创建元素块级别，从而可以设置其大小。

Answer 2

因为a不是块级元素而您无法在其上设置宽度。 Block vs inline对于理解CSS非常重要，因此您应该花些时间熟悉这个概念。

这是一个非常重要的建筑块（teehee抱怨双关语）