Q&A
ご回答本当にありがとうございました。
前提・実現したいこと
HTML/CSSの学習のため、Bootstrapを用いたWebページ(https://www.airbnb.jp/host/homes?_set_bev_on_new_domain=1582461265_MjJlNGU1NmYzMzNi)の模写を行っています。
しかし、ヘッダー部分を作成中に、ヘッダーの上部分に想定外の余白ができてしまいました。
そこで、以下2点について教えていただけましたら幸いです。
・なぜこのような余白ができてしまうのか
・どのように対処すればよいか
よろしくお願いいたします。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="css/style.css"> 6 <title>Airbnbでお家、アパート、お部屋をシェアしよう</title> 7 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> 9 </head> 10 <body> 11 <header> 12 <div class="container-fulid"> 13 <div class="header-logo"> 14 <a href="#"> 15 <img src="img/header-logo.svg" alt="header-logo" width="34" height="34"> 16 </a> 17 </div> 18 <div class="header-list"> 19 <ul> 20 <li>概要</li> 21 <li>準備</li> 22 <li>安全</li> 23 <li>マネープラン</li> 24 </ul> 25 </div> 26 </div> 27 </header> 28 29 <div class="main"> 30 main 31 </div> 32 33 <footer> 34 <div class="container-fulid"> 35 footer 36 </div> 37 </footer> 38 </body> 39</html>
css
1 2* { 3 box-sizing: border-box; 4 padding: 0; 5 margin: 0; 6} 7 8/*共通*/ 9body { 10 11} 12 13li { 14 list-style: none; 15} 16 17/*header*/ 18header { 19 background-color: pink; 20} 21 22header .container-fulid { 23 height: 82px; 24} 25 26.header-logo { 27 margin-left: 24px; 28 line-height: 80px; 29 float: left; 30} 31 32 33header li { 34 float: left; 35 line-height: 80px; 36} 37 38/*main*/ 39.main { 40 background-color: aqua; 41} 42 43/*footer*/ 44footer { 45 background-color: lime; 46}
試したこと
ヘッダー要素のfloat:leftを解除したところ、余白がなくなることを確認しています。
また、Bootstrapのcontainerを使わなければ余白がなくなることも確認しました。
回答2件
0
ベストアンサー
原因はulの高さを指定してないことです。高さのないulにBootstrapによってmargin-bottom: 1remが設定されているためこのようなことが起きています。ulのmarginを0に書き換えるか、liのline-heightを80pxにしているのであれば、ulの高さも80pxにすることで解決します。
追記
floatを適用した子要素は親要素から浮いた形となり、ulは要素を持たなくなるので高さが0となります。上記の方法以外にも、別の要素に影響を与えないようにするためulにoverflow: hiddenを書き加えてfloat状態を解除する方法もあります。こちらの方が良いかもしれません。
投稿2020/03/06 09:25
編集2020/03/06 09:53
総合スコア757
0
liがフロートしているので、ulが高さを失って、さらにmargin-bottom: 1rem;が聞いているのが原因です。
なので、
css
1.header-list ul { 2 display: flow-root; 3}
として、ブロック整形コンテキストを作るか、
css
1.header-list ul { 2 margin-bottom: 0; 3}
として、マージンを消すか、すれば解決するでしょう。
投稿2020/03/06 09:40
編集2020/03/06 09:41
総合スコア36960
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/06 11:02