Q&A
まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
progateの上級編の模写をしようとしています。
下記のコードで書いているとheaderの下に意図しない余白ができてしまいます。
検証ツールで調べても余計な余白は設定してないように思います。
これはサイト（chrome）側の表示の問題なのでしょうか。
それとも何かコードが間違っているのでしょうか。
ご回答お願い致します。
html
1<html> 2 <head> 3 <mata charset="utf-8"> 4 <link rel="stylesheet" href="stylesheet.css"> 5 </head> 6 <body> 7 <header> 8 <div class="header-left"> 9 <img class="logo" src="img/main_logo.png"> 10 </div> 11 <div class="header-right"> 12 <a href="#">レッスン</a> 13 <a href="#">新規登録</a> 14 <a href="#">ログイン</a> 15 </div> 16 </header> 17 <div class="top-wrapper"> 18 <div class="container"> 19 <h1>LEARN TO CODE.</h1> 20 <h1>LEARN TO BE CREATIVE.</h1> 21 <p>progateはオンラインプログラミング学習サービスです。</p> 22 <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> 23 </div> 24 </div> 25 </body> 26</html>
CSS
1header { 2 background-color: rgba(47,79,79,0.8); 3 line-height: 65px; 4 height: 65px; 5} 6 7.header-left { 8 float: left; 9} 10 11.logo { 12 width: 124px; 13 padding: 20px 0px; 14} 15 16.header-right { 17 float: right; 18} 19 20.header-right a { 21 padding: 0 24px; 22 color: white; 23} 24 25.top-wrapper { 26 background-image: url(img/top.png); 27 background-size: cover; 28}
回答2件
0
CSSが提示されているもので全部なら、ブラウザーが各要素に設定しているマージンをリセットしていないだけでは。
CSS
1* { 2 margin: 0; 3}
をCSSの先頭に入れてみれば確認できます。
投稿2020/06/30 17:25
総合スコア11990
0
ベストアンサー
CSS
1.container { /* 上下にpaddingを1pxつけても解消できます */ 2 overflow: hidden; 3}
【マージンの相殺とoverflow, clear:both | メモログ】
https://memolog.org/2012/06/collapsing_magin_with_overflow_or_clearance.html
【CSS - overflow:hiddenとmarginの関係性｜teratail】
https://teratail.com/questions/91131
【marginの相殺の考察 ｜ Tips Note by TAM】
https://www.tam-tam.co.jp/tipsnote/html_css/post10892.html
投稿2020/06/30 17:22
総合スコア69398
あなたの回答
tips
プレビュー
