Q&A
模写コーディングをして勉強をしています。
コーディングをしていくうちに、フッターに空白ができてしまい、
検証ツールを見ても原因がわかりません。
どこを修正すればよいでしょうか？
CSS（SCSS)のソースです
<body> <!--ヘッダー--> <header class="p-header"> <div class="container"> <div class="p-header__logo"> <img src="img/logo.svg" width="168" height="30"> </div><!-- /.p-header__logo --> <div class="p-header__nav"> <ul class="p-header__nav__list"> <li><a href="">宿泊先</a></li> <li><a href="">体験</a></li> <li><a href="">オンライン体験</a></li> </ul><!-- /.p-header__nav --> </div><!-- /.p-header__nav --> <div class="p-header__action"> <ul class="p-header__nav__list"> <li><a href="">ホストになる</a></li> <li><a href="">G</a></li> <li><a href="">B</a></li> </ul><!-- /.p-header__nav --> </div><!-- /.p-header__action --> ヘッダー </div><!-- /.container --> </header> <!--メイン--> <main> <div class="container"> メイン </div><!-- /.container --> </main> <!-- フッター --> <footer class="p-footer"> <div class="container"> <div class="p-footer__body"> <!-- item --> <div class="p-footer__item"> <div class="p-footer__item__head"> 企業 </div> <div class="p-footer__item__body"> <ul class="p-footer__item__list"> <li><a href="">Airbnbのご利用方法</a></li> <li><a href="">ニュースルーム</a></li> <li><a href="">株主・投資家のみなさまへ</a></li> <li><a href="">Airbnb Plus</a></li> </ul> </div> </div> <!-- item --> <div class="p-footer__item"> <div class="p-footer__item__head"> 企業 </div> <div class="p-footer__item__body"> <ul class="p-footer__item__list"> <li><a href="">Airbnbのご利用方法</a></li> <li><a href="">ニュースルーム</a></li> <li><a href="">株主・投資家のみなさまへ</a></li> <li><a href="">Airbnb Plus</a></li> </ul> </div> </div> <!-- item --> <div class="p-footer__item"> <div class="p-footer__item__head"> 企業 </div> <div class="p-footer__item__body"> <ul class="p-footer__item__list"> <li><a href="">Airbnbのご利用方法</a></li> <li><a href="">ニュースルーム</a></li> <li><a href="">株主・投資家のみなさまへ</a></li> <li><a href="">Airbnb Plus</a></li> </ul> </div> </div> <!-- item --> <div class="p-footer__item"> <div class="p-footer__item__head"> 企業 </div> <div class="p-footer__item__body"> <ul class="p-footer__item__list"> <li><a href="">Airbnbのご利用方法</a></li> <li><a href="">ニュースルーム</a></li> <li><a href="">株主・投資家のみなさまへ</a></li> <li><a href="">Airbnb Plus</a></li> </ul> </div> </div> </div> <div class="p-footer__foot"> © 2021 Airbnb, Inc. </div> </div> </footer> </body> ```body { } a { color: #000; text-decoration: none; } .container { max-width:1400px; width:100%; margin:0 auto; } header{ background: blue; } main{ background: green; } footer{ background: orange; } .p-header{ .container{ height:80px; display:flex; align-items: center; justify-content:space-between; border-bottom:1px solid #000; } &__logo{ } &__nav{ &__list{ display:flex; align-items:center; } } &__action{ &__list{ display:flex; align-items:center; } } } .p-footer{ &__body{ } &__foot{ border-top:1px solid #000; margin:40px 0 0; padding:24px 0 0; } } ```htmlのソースです
テスト環境のURLです
回答1件
0
ベストアンサー
.p-footer__rootのmarginの1番目の値(40px)を変えると横線と"Airbnb Plus"の間の空白の高さを、paddingの1番目の値(24px)を変えると横線と"© 2021 Airbnb, Inc."の間の空白の高さを変更できます。0pxにすれば空白はなくなります。
.p-footer{ &__body{ } &__foot{ border-top:1px solid #000; margin:40px 0 0; //40px ... 横線と"Airbnb Plus"の間の空白 padding:24px 0 0; //24px ... 横線と"© 2021 Airbnb, Inc."の間の空白 } }
追記
"© 2021 Airbnb, Inc."の下の空白は、ページ全体がブラウザの画面内に収まっているために出てくる空白です。<main>のheightを350pxほどに設定するか、ページを拡大したりして、ページがブラウザの画面からはみ出る(スクロールできる)ようにすると、この空白は消えます。
変更前:
ページを150%に拡大したとき:
<main>のスタイルにheight: 350pxを追加したとき:
投稿2021/10/22 14:31
編集2021/10/22 18:49
総合スコア501
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/10/22 15:13
2021/10/22 17:44
2021/10/22 17:50
2021/10/22 18:50