89444


現在ちょっとしたプロトタイプを作成しておりヘッダー部分を作っていたのですが、要素に`hover`したときに縦幅いっぱいに広がってほしい`inline-
block`の要素がうまく機能せずに、行き詰まっています。

例えば「要素1」の部分に`hover`すると以下のような結果になり、  
ご覧の通り上の`border-top:3px dotted red;`の一番上までホバーしたときの色が変わらずに、中途半端な要素の大きさになってしまいます。  
文章力が無くて大変申し訳ありませんが、`border`の要素に邪魔されずに`hover`時に要素が全体に行き届くようにするには、どのようにすればいいでしょうか？

試したこととして、後に`border-top`のコードを消しました。消したところ、要素が一番上まで届き`line-
height`を変えて理想の形にすることが出来ましたが、私としては上の`border`も表示させたいと思っています。  
また、`padding`や`margin`を`0`にし隙間をなくそうとしましたが、こちらも意味はありませんでした。

`border`の値が`3px`になっているので`3px`分の隙間が空いているのでしょうか？  
大変初歩的な質問で申し訳ないのですが、どなたか分かる方、答えてくれると幸いです。

(`flex box`整えてないのでもしかしたら実行環境によってゃ要素がぐちゃぐちゃになってしまうかも知れません)

* * *

**問題の画像：**

##
![問題のホバー画像](https://ddjkaamml8q8x.cloudfront.net/questions/2022-06-11/f745a22f-faed-4de9-a31a-8ad4c5ebf40a.png)

**現状のHTMLコード：**

[code]

    <div class="container">
      <header>
        <div class="header-logo">ロゴ名</div>
        <div class="header-list">  <!-- ここから問題のheader場所 --->
          <ul>
            <li>要素1</li>
            <li>要素2</li>
            <li>要素3</li>
            <li>要素4</li>
          </ul>
        </div>
      </header>
    </div>
    
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');
      </style>
    
[/code]

**現状のCSSコード：**

[code]

    .container {
      font-family: "Zen Maru Gothic"; 
    }
    header {
      background-color: rgba(135,206,250,0.7);
      height: 100px;
      border-top: 3px dotted red;  /*多分ここが問題……？ */
      border-bottom: 3px dotted red;
      margin-top: 2px;
      width: 100%;
    }
    .header-logo {
      font-size: 35px;
      float: left;
      padding: 30px 20px;
    }
    .header-list li {
      float: right;
      list-style: none;
      padding: 20px 40px;
      display: inline-block;
      font-size: 17px;
      line-height: 45px;
    }
    .header-list li:hover {
       background-color: rgba(135,206,250,1);
      transition: all 500ms; 
    }
    
[/code]

**（追記）**  
`header-logo`要素も`hover`時に要素を反映させた結果、こちらはうまくいきました。  
コード自体は`header-list`と変わらないはずなのですが、何がいけないのでしょうか？  
**追加css部分:**

[code]

    .header-logo {
      line-height: 40px;
    }
    
    .header-logo:hover {
      background-color: rgba(135,206,250,1);
    }
    
[/code]


CC BY-SA 4.0
2022-06-10T17:04:12.413
89321
2022-06-17T06:00:58.987
2022-06-17T01:12:04.180
51596
51596
question
html css
inline-blockの要素を縦幅いっぱいに広げたい


上に空間ができる原因自体は ul に margin がついてるからです  
ul の margin をきれば上にくっつくようにはなります

height にヘッダと同じサイズを指定すれば li 自体は目一杯広がります  
ただ inline-block は vertical-align がきかず  
padding で調整しようとすると結構大変だし、  
ユーザ側でフォントサイズとかいじったときにずれちゃうので  
flex に任せるのが今風で簡単かなと思います

サンプルでは元のコード流用して縦調整だけ flex 使ってますが  
どうせ flex 使うならメニューレイアウト自体 flex に任せたほうが楽かも

[code]

    .container {
      font-family: "Zen Maru Gothic"; 
    }
    header {
      background-color: rgba(135,206,250,0.7);
      height: 100px;
      border-top: 3px dotted red;  /*多分ここが問題……？ */
      border-bottom: 3px dotted red;
      margin-top: 2px;
      width: 100%;
    }
    .header-logo {
      font-size: 35px;
      float: left;
      padding: 30px 20px;
    }
    .header-list li {
      float: right;
      list-style: none;
      padding-left: 40px;   /* 変更 */
      padding-right: 40px;  /* 変更 */
      display: inline-flex; /* 変更 */
      align-items: center;　/* 追加 */
      font-size: 17px;
      line-height: 45px;
      height: 100px;
    }
    .header-list li:hover {
       background-color: rgba(135,206,250,1);
      transition: all 500ms; 
    }
    
    /* 追加 */
    .header-list > ul {
      margin: 0;
    }
[/code]

[code]

    <div class="container">
      <header>
        <div class="header-logo">ロゴ名</div>
        <div class="header-list">  <!-- ここから問題のheader場所 --->
          <ul>
            <li>要素1</li>
            <li>要素2</li>
            <li>要素3</li>
            <li>要素4</li>
          </ul>
        </div>
      </header>
    </div>
    
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');
      </style>
[/code]

* * *

ちな今回の直接原因じゃないですが  
border を margin に含めるか padding に含めるかを選択できる  
box-sizing っていうプロパティもあるので興味あれば調べてみてください


CC BY-SA 4.0
2022-06-17T06:00:58.987
89444
2022-06-17T06:00:58.987
89321
answer