私の<a>タグは、1つのコードセットで 'display：block'を継承しますが、他のコードセットで継承されないのはなぜですか？

Question

私はナビゲーションを使っていくつかのヘッダーを作成していました。具体的には、ナビゲーションリンクを作成しようとしていたので、テキスト自体だけではなく、周囲の領域をクリックできるようにするためのパディングがありました。

通常あなたがaタグにパディングを適用する必要がある行動のこの種を取得し、display: blockプロパティを使用するために：私は、周囲のクリッカブルを達成することができる午前私はhereを持っている私のcodepenで

li a { 
    display: block; 
    padding: 10px 15px; 
} 

をdisplay: blockは適用されません。しかし、this hereの類似したコードをインターネットで見つけた場合、パディングエリアをクリックできるようにするにはdisplay: blockが必要です。

なぜ最初のコードリンクにdisplay: blockプロパティを挿入する必要はありませんか？それは李からその財産を継承していますか？もしそうなら、2番目のコードセットを継承しないのはなぜですか？

Answer 1

に背景色を追加し、ULスタイルでこれを削除してください。インライン要素は、ブロックのようにパディングを処理できます。

例：

div{ 
 
    background:red; 
 
    padding: 10px; 
 
    margin-bottom:20px; /* just for visual purpose */ 
 
} 
 

 
span{ 
 
    background:lightblue; 
 
    padding: 10px; 
 
}

<div>Block</div> 
 
<span>Inline</span>

あなたが設けられた二つのCodepen例との違いは、第1に、ulはoverflow: hiddenスタイルを強制することによって、リンクのパディングを隠しているということです。

ulからoverflowスタイルがaタグ（リンク）は目に見えて、彼らが持っているパディングを表示することができますことを取り外します。

Answer 2

このメソッドの本当の魔法は、要素に設定された高さを与えずに、オーバーフローを隠しに設定すると内部要素の高さを取ります。

overflow:hidden; 

あなたは必ずしも所望の効果を達成するためにaにdisplay:blockを追加するを持っていないこの

li a 
{ 
background-color:#333; 
}