displayblockについて

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

display:block;がなぜ必要なのでしょうか。

該当のソースコード

 <header>
 <div class="container">
  <div class="header-left">
    <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
    </div>
  <div class="header-right">  
    <a class="login" href="#" >ログイン</a>
    </div>
    </div>
 </header>


header{
   height:65px;
   width:100%;
   background-color:rgba(34,49,52,0.9);
   top:0;
   position:fixed;
   Z-index:10;
   
}

.logo{
  width:124px;
  margin-top:20px;
}

.header-left{
  float:left;
}

.header-right{
  float:right;
  background-color:rgba(255,255,255,0.3);
   transition:all 0.5s;
}

.header-right:hover{
  background-color:rgba(255,255,255,0.5);
}

.header-right a{
  line-height:65px;
  padding:0px 25px ;
  color:white;
  display:block;
}

試したこと

progate中級道場です。
display:block;部分を削除してみましたが、表示は変わらないように思います。なぜ、この箇所が必要なのか、教えてほしいです。よろしくお願いします。

補足情報（FW/ツールのバージョンなど）

Comments

[m.ts10806]

>progate中級道場
意図はProgateしか知らないので、Progateに問い合わせてください。
それか、これまで習ったことにあるのでは。

[sugatti5]

Progateに問い合わせしてみました。ありがとうございます。

Answer 1

aタグのクリック範囲を広げるための設定ですね。

試しに、display:block;を削除して、マウスカーソルを「ログイン」の辺りへ移動させてみてください。「ログイン」の文字上だけでカーソルが手の形に変わります。
display:block;があると、グレーのボックスどこでも手の形に変わります。

ブロックレベル要素に変換することでリンクのクリック可能範囲が親要素のサイズまで広がるということですね。

普通によく使われる手法ですのでWEB検索すると解説ページが多数見つかります。
例えば、

【HTML/CSS】aタグのクリック範囲を親要素のサイズに合わせる ｜ Into the Program

Comments

[sugatti5]

親要素のサイズに広げるという考え方がわかりませんでした。助かりました。

Answer 2

display:block;部分を削除してみましたが、表示は変わらないように思います。

目に見えないところに変化があるみたいですよ。

試しに、.header-right aに背景色を付けてみてから、display: blockの有無による変化を確認してみてください。

displayがblockの場合と、inlineの場合とでは、line-height: 65pxの効き方に違いが出るようです。

作者の真意は分かりませんが、総合的(あるいは将来的?)な判断で、blockを選択したのかもしれません。

Comments

[sugatti5]

目に見えないところの変化というのが、確かにあるのですね。
アドバイスいただくことで、安心しました。
考え方を教えていただき、ありがとうございます。