ナビゲーションバーと画像との隙間をなくしたい。

上記の画像の矢印をさしている、ナビゲーションバーと画像との隙間をなくすにはどうすればいいでしょうか？
nav ulタグのmarginは0だし、nav liタグのpaddingだとナビゲーションバーの高さが変わってしまうし、imgタグでmarginやpaddingを設定しても何も変わりませんでした。

<body>
　　<header>
        <div class="header-in">
            <h1>Sho page</h1>
            <nav>
                <ul>
                    <li class="toplink">トップ</li><li>自己紹介</li><li>趣味など</li><li>○○○</li>
                </ul>
            </nav>
        </div>
    </header>
    <article>
        <img src="haikei.jpg" width="960" height="430" alt="背景画像" class="maingazo">
        <div class="catch">
            <h1>しょうのホームページへようこそ</h1>
            <p>（アピール文）</p>
        </div>
    </article>
</body>

body{
    background: #efcbc1;
    color: #000000;
    font-family: "メイリオ", "Hiragino Kaku Gothic Pro", sans-serif;
    margin: 0;
    padding: 0;
}
header{
    background: #ffffff;
}
p{
    font-size: 90%;
}
h1{
    font-size: 180%;
}
ul{
    list-style: none;
    padding-left: 0;
    line-height: 3.5;
    font-size: 125%;
}
nav li{
    display: inline-block;
    padding: 0 20px 0 20px;
    border-right: 1px solid #000000;
    background: #dcdcdc;
}
header h1{
    float: left;
    margin-top: 12px;
    margin-left: 40px;
    font-size: 200%;
}
article{
    clear: both;
    position: relative;
    width: 960px;
    margin: 0 auto 0 auto;
}
nav ul{
    text-align: right;
    margin: 0;
}
.toplink{
    border-left: 1px solid #000000;
}
.catch{
    position: absolute;
    top: 20px;
    left: 30px;
    color: #ffffff;
    text-shadow: 5px 5px 10px #333333;
}
.maingazo{
    background: #0099ff;
}
.header-in{
    width: 960px;
    margin: 0 auto 0 auto;
}

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

回答1件

ベストアンサー

header h1 のデフォルトの下マージンがはみ出て、その分次のarticleブロックが下がってます。
なぜ、はみ出るかというと、マージンの相殺が原因です。

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

margin-bottom: 0; を追加すればいいでしょう。

css
1header h1{
2  float: left;
3  margin-top: 12px;
4  margin-left: 40px;
5  font-size: 200%;
6  margin-bottom: 0; /* 追加 */
7}

あるいは、リセットCSSを利用するとこのようなトラブルを事前に防げます。

投稿2020/08/30 10:57

hatena19

総合スコア34075

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

ナビゲーションバーと画像との隙間をなくしたい。

関連した質問