HTML/CSSについて　margin-bottomの影響でページの上部に空白が出来る。

ページの上部に空白が出来てしまい、困っています。
wrapperクラスのmargin-bottomが影響していることが分かったのですが、なぜ上に余白ができるのか分かりません。
心優しい有識者の方が居たら、是非おしえてくれると助かります。

以下コードです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>Profile</title>
6    <link rel="stylesheet" href="stylesheet.css">
7  </head>
8  <body>
9    <header id="header" class="wrapper">
10      <h1><a href=""><img src="logo.svg" alt="Profile"></a></h1>
11      <nav>
12        <ul>
13          <li>about</li>
14          <li>bicycle</li>
15        </ul>
16      </nav>
17    </header>
18    <main>
19      <div class="mainvisual">
20
21      </div>
22      <section class="about wrapper">
23
24      </section>
25      <section class="bicycle wrapper">
26
27      </section>
28    </main>
29    <footer>
30
31    </footer>
32  </body>
33</html>

CSS
1@charset "UTF-8";
2
3* {
4    box-sizing: border-box;
5    margin: 0;padding: 0;
6    position: relative;
7}
8
9header h1 {
10    float: left;
11}
12
13header nav {
14    float: right;
15}
16
17.wrapper {
18    max-width: 960px;
19    margin:0 auto 100px auto;
20    padding: 0 4%;
21    text-align: center;
22}

行動規範の内容に同意します

回答1件

ベストアンサー

h1とnavに指定しているfloatが原因です。
floatを指定すると、指定された箇所は浮き上がったような状態となります。
そのため、wrapperクラスがh1とnavの下に回り込んだ状態になり
wrapperクラスにmargin-bottomを指定するとh1とnavを押し下げるような挙動になります。
(見た目上はあたかもwrapperクラスにmargin-topをかけているように見えます)

以下のページの説明がイメージしやすいと思います。

https://pikawaka.com/html-css/float

回避策としてclearプロパティを使う方法などがありますが
この場合はdisplay: flex;を使った方がスマートに思えます。

css
1@charset "UTF-8";
2
3* {
4    box-sizing: border-box;
5    margin: 0;padding: 0;
6    position: relative;
7}
8
9header h1 {
10  /* floatを削除 */
11}
12
13header nav {
14  /* floatを削除 */
15}
16.wrapper {
17    display: flex; /* 追加 */
18    justify-content: space-between; /* 追加 */
19    max-width: 960px;
20    margin:0 auto 100px auto;
21    padding: 0 4%;
22    text-align: center;
23}