a要素にdisplay:blockつけた時クリック範囲が横にしか広がらないのはなぜでしょうか。

Question

    <div class="oy">
      <li class="a">
　　　　　<a href=""> a</a>
      </li>
    </div>

.a {
  background: red;
  width: 100px;
  height: 50px
}

a {
  display: block;
}

a要素の範囲が.aの幅分は広がるが高さに関しては広がらないのはなぜなのか理由が入りたいです。

Comments

[m.ts10806]

結構な頻度で質問されてますが、自身では調べたりしないのでしょうか。
投げっぱなしで放置している質問も多いようですし、アドバイスする人いなくなりますよ。

Answer 1

a要素にdisplay:blockつけた時

ついていません。提示されたCSSでは、<li class="a">はdisplay: blockとなっていますが、displayは継承されませんので、内側の<a>はデフォルトのdisplay: inlineのままです。

Answer 2

ブロックボックスは、幅は指定しなければ親要素一杯に広がりますが、高さは指定しなければ内容の高さになります。height: 100%; とすれば親の高さになります。

a {
  display: block;
  height: 100%;
}