ヘッダーの下にある余白が消えません。

ヘッダーの下にある余白を消したいのと、赤塗りのものをヘッダーに収めたいです。

発生している問題・エラーメッセージ

ヘッダーの下にある余白が消えません。
加えて、赤塗りしている<a>が<main>に降りてきてしまいます。

ABOUTがlogoにかかっているのはデザインなので大丈夫です。

始めたばかりで質問するのも申し訳ありませんが、
調べつくし試しましたが一向に解決しません。

是非、知恵をお貸しください。
よろしくお願いいたします。

エラーメッセージ

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="first.css">
    <link rel="stylesheet" href="query-first.css">
    <title>test_First</title>
      
</head>
<body>
    <header id=page-top>
        <nav>
            <ul class="left">
                <li><a href="#">FIRST</a></li>
                <li><a href="#">PLAN</a></li>
                <li><a href="#">SERVICE</a></li>
            </ul>
            
            <div class="logo">
            <a href="arrivo.html"><img src="#" alt="サイトロゴ"></a>
            </div>
            
            <ul class="right">
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">POINT</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
            
            <div class="map">
            <a href="#">サイトマップ</a>
            </div>
        </nav>
        <div class="clear"></div>
    </header>

    <div class="main">

        <div class="title">
            <h1>FIRST</h1>
        </div>
    </div>
</body>
</html>





body{
    margin: 0;//auto
    width: 1920px;
}

.clear{
    clear: both;
}

ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}

a{
    text-decoration: none;
}

nav{
    height: 182px;
}

header{
    width: 100%;
    height: 182px;
    background-color:rgb(189, 187, 187);
    
    ul,li,img{
        display: block;
        float: left;
    }

    .left li{
            margin: 111px 0 48px 116px;
            font-size: 23px;
        }
         li:first-child{
            font-size: 25px;
            padding-bottom: 25px;
            margin: 109px 0 0 207px;
         
        
    }

    .logo img{
        width: 534px;
        height: 112px;
        background-color: black;
        //↑質問にあたりロゴ非表示のため
        margin: 39px 0 31px;
    }

    .right{

        li{
            font-size: 23px;
            margin: 111px 0 48px 87px;
        }
        li:first-child{
            margin: 111px 0 0 -5px;
        }
    }


        .map{
            display: inline-block;
            margin: 52px 120px 110px 78px;

            a{
            background-color: red;
            font-size: 15px;
            }
        }
}

.main{
    background-color:#8BC4A7;
    height: 500px;
    width: 1920px;
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Lhankor_Mhy

2021/02/02 09:50

ソースコードを書きましょう https://teratail.com/help/question-tips#questionTips3-5-1

music

2021/02/02 09:54

大変失礼しました。すぐに記載します！ご指摘ありがとうございます。

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

回答2件

ベストアンサー

親子間マージン相殺が原因です。

あるブロックの margin-top と、1つ以上の子孫ブロックの margin-top を隔てる境界、（略）のいずれもがない場合、（略）それぞれマージンが折り畳まれます。折り畳まれた側のマージンは、親要素の外側に出ます。

マージンの相殺 - CSS: カスケーディングスタイルシート | MDN

以上の通り、h1 のマージンが .title .main の外側に出ています。header nav と .left .right の関係も同様です。

解決方法ですが、ブロック整形コンテキストを生成するのが手っ取り早いです。

マージンの相殺も、同じブロック整形コンテキストに所属するブロック同士でしか発生しません。

ブロック整形コンテキスト - 開発者ガイド | MDN

たとえば：

css
1header{
2    display: flow-root;
3// ... 
4
5.main{
6    display: flow-root;
7// ...

加えて、赤塗りしている<a>が<main>に降りてきてしまいます。

フロートしている要素は、そのコンテナに収まりきらない場合は、下に落ちます。
テキストが右端まで行くと次の行に折り返すのと、似たようなふるまいです。

正方形を追加していくと、包含ボックスが埋まるまではその右側に詰め込まれていきますが、その後は次の行に回り込みます。

浮動要素の位置をどのように決めるか | float - CSS: カスケーディングスタイルシート | MDN

解決方法ですが、コンテナに収まるようにサイズを調整する以外ないです。
簡単な方法はありません。.left li ひとつ目の左マージンが207px、左ボーダーが0px、左パディングが0px、幅が73.2px...で、全部で280.2px、二つ目の左マージンが...というように、すべてを足し合わせて計算するしかないです。

「面倒だな」と思いましたか？
その通りです。これは面倒です。
ですので、現在、横並びにするためにフロートを使う人はほとんどいないでしょう。古いページを更新するためにやむなく使っているか、知識が足りないために知らずに使っているか、20年前からタイムスリップしてきたか、のどれかです。

現在の環境でしたら、フレックスレイアウトかグリッドレイアウトをお勧めします。

フレックスボックス - ウェブ開発を学ぶ | MDN
グリッド - ウェブ開発を学ぶ | MDN

投稿2021/02/02 14:34

編集2021/02/02 14:37

Lhankor_Mhy

総合スコア36158

music

2021/02/03 05:31

回答ありがとうございます。なるほど。現代人ですが、まだ一か月足らずなので知識不足だと思います。。。さっそくご提案いただいたサイトを読ませていただきました。目から鱗とはこのことですね！そこで疑問なのですが、今回は<ul> <img> <ul>というコードです。この場合、全てを囲った＜nav>にflexを指定するのと、 <ul>にflex指定して、<img>はmargin指定にするのではどちらが正しいのでしょうか？ <img>に<ul>が両サイドから寄っているので、個人的には<ul>と<ing>は別にした方がいいのではと考えています。ご意見お聞かせください。よろしくお願いします。

Lhankor_Mhy

2021/02/03 13:58

私ならnavとulの両方にflexを指定します。左寄せ、センタリング、右寄せができるので、それと要素の幅でレイアウトすると思います。

music

2021/02/03 17:24 編集

header{ height: 182px; nav{ display: flex; justify-content: center; .logo{ margin: 39px 0 31px; } .left{ display: flex; justify-content: flex-end; li{ font-size: 23px; margin: 111px 0 50px 100px; } } .right{ display: flex; justify-content: flex-start; li{ :first-child{ margin-left: 0; } } } } } navとulに指定してみましたが、navしか適用されません。加えて:first-childのmarginも適用されなくなってしまいました...

Lhankor_Mhy

2021/02/04 01:19

フレックスレイアウトでのマージンはなかなか仕様がややこしいので、私はあまり使わないです。とりあえず、コードを拝見してみますので、お時間をください。

music

2021/02/04 02:06

お忙しい中、ありがとうございます。少し変えてみたらなんとかセンターに並びましたが、 .map aをnavに入れるとulとimgがセンターに来ないので、 navの外に配置したらカラム落ちしてしまいます。。。 header{ height: 182px; nav{ display: flex; justify-content: center; .logo{ margin: 39px 0 31px; } .left{ display: flex; li{ font-size: 23px; margin: 111px 0 0 100px; } :first-child{ margin-left: 0; } } .right{ display: flex; li{ font-size: 23px; margin: 111px 0 0 100px; } :first-child{ margin-left: -5px; } } } .map a{ display: block; float: right; background-color: red; font-size: 15px; margin: 50px 0px 0 150px; } } .main { background-color: #8BC4A7; height: 500px; width: 100%; }

Lhankor_Mhy

2021/02/05 01:44

「ulとimgがセンターに来ない」とのことですが、つまり、「ul img ul」をセットにしてセンタリングし、同じ高さ右寄せで.mapを置きたいということですか？そのことは質問には書いてなかったと思いますが、期待している結果は質問に記載しておいた方がよい回答が得られやすいですよ。 https://teratail.com/help/question-tips#questionTips3-4-3

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

フレックスレイアウトかグリッドレイアウトを使わずに直してみました。

HTMLのH1タグなどは、ろくに知らない素人がHTMLを組んだとしてもOKなように、
ブラウザに組み込みのスタイルが設定されてて、それが悪さする場合があり、上書きしてやらないといけません。
またSCSSもおかしいところがあったので直しておきました。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
7    <!--↑追記-->
8
9    <link rel="stylesheet" href="first.css">
10    <link rel="stylesheet" href="query-first.css">
11    <title>test_First</title>
12
13</head>
14<body>
15    <header id="page-top">
16        <nav>
17            <ul class="left">
18                <li><a href="#">FIRST</a></li>
19                <li><a href="#">PLAN</a></li>
20                <li><a href="#">SERVICE</a></li>
21            </ul>
22
23            <div class="logo">
24                <a href="arrivo.html"><img src="#" alt="サイトロゴ"></a>
25            </div>
26
27            <ul class="right">
28                <li><a href="#">ABOUT</a></li>
29                <li><a href="#">POINT</a></li>
30                <li><a href="#">CONTACT</a></li>
31            </ul>
32
33            <div class="map">
34                <a href="#">サイトマップ</a>
35            </div>
36        </nav>
37    </header>
38
39    <div class="main clear">
40        <div class="title">
41            <h1>FIRST</h1>
42        </div>
43    </div>
44
45</body>
46</html>
47

ヘッダーの上の余白を取り除くようにSCSSを修正しました。

SCSS
1@charset "UTF-8";
2body {
3  margin: 0;
4  /*auto*/
5  width: 1920px;
6}
7
8h1 {
9  /*user agent(ブラウザのこと)が規定値で持ってるmarginを打ち消してpaddingで実現する*/
10  -webkit-margin-before: 0;
11          margin-block-start: 0;
12  -webkit-margin-after: 0;
13          margin-block-end: 0;
14  padding-top: 0.67em;
15  padding-bottom: 0.67em;
16}
17
18.clear {
19  clear: both;
20}
21
22ul, li {
23  margin: 0;
24  padding: 0;
25  list-style: none;
26}
27
28a {
29  text-decoration: none;
30}
31
32nav {
33  height: 182px;
34}
35
36header {
37  width: 100%;
38  height: 182px;
39  background-color: #bdbbbb;
40}
41
42header ul, header li, header img {
43  display: block;
44  float: left;
45}
46
47header .left li {
48  margin: 111px 0 0 116px;
49  /*bottom marginを0に*/
50  font-size: 23px;
51}
52
53header li:first-child {
54  font-size: 25px;
55  padding-bottom: 25px;
56  margin: 109px 0 0 207px;
57}
58
59header .logo img {
60  width: 534px;
61  height: 112px;
62  background-color: black;
63  /*↑質問にあたりロゴ非表示のため*/
64  margin: 39px 0 31px;
65}
66
67header .right li {
68  font-size: 23px;
69  margin: 111px 0 0 87px;
70  /*bottom marginを0に*/
71}
72
73header .right li:first-child {
74  margin: 111px 0 0 -5px;
75}
76
77header .map {
78  /*display: inline-block;*/
79  /*displayを指定しない*/
80  margin: 0 120px 110px 78px;
81  /*↑TOP MARGINの指定をやめる*/
82}
83
84header .map a {
85  background-color: red;
86  font-size: 15px;
87}
88
89.main {
90  background-color: #8BC4A7;
91  height: 500px;
92  width: 1920px;
93}
94