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 はブロックレベルの要素ではないため、幅を設定することはできません。ブロックとインラインは CSS を理解する上で非常に重要であるため、時間をかけて概念を理解する必要があります。

これは非常に重要な構成要素です(駄洒落でごめんなさい)

score 1 · Accepted Answer

デフォルトでは、<a>要素はインライン要素です。インライン要素には幅や高さを設定できません。

を追加display: block;することで、要素をブロックレベルにし、そのサイズを設定できるようにします。

2 に答える 2