ページの上部に空白が出来てしまい、困っています。
wrapperクラスのmargin-bottomが影響していることが分かったのですが、なぜ上に余白ができるのか分かりません。
心優しい有識者の方が居たら、是非おしえてくれると助かります。
以下コードです。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Profile</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <header id="header" class="wrapper"> <h1><a href=""><img src="logo.svg" alt="Profile"></a></h1> <nav> <ul> <li>about</li> <li>bicycle</li> </ul> </nav> </header> <main> <div class="mainvisual"> </div> <section class="about wrapper"> </section> <section class="bicycle wrapper"> </section> </main> <footer> </footer> </body> </html>
CSS
@charset "UTF-8"; * { box-sizing: border-box; margin: 0;padding: 0; position: relative; } header h1 { float: left; } header nav { float: right; } .wrapper { max-width: 960px; margin:0 auto 100px auto; padding: 0 4%; text-align: center; }
まだ回答がついていません
会員登録して回答してみよう
