重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

詳しい人求む！

header と nav の隙間を埋めたい。

解決済

  • 質問者：i-d-a-i
  • 質問日時：
  • 回答数：4件

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1 {
font-size: 1rem;
font-weight: normal;
margin-top: 0;
margin-bottom: 0;
}
ul {
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
list-style-type: none;
}

header {
background-color: rgba(100, 100, 100, 1.0);
}
.global-nav {
background-color: rgba(52, 177, 174, 1.0);
}
</style>
</head>

<body>
<header>
<h1>ロゴ</h1>

</header>
　
<nav class="global-nav">
<ul>
<li><a href="">トップ</a></li>
</ul>　
</nav>


</body>
</html>


<header> と <nav> に隙間ができるのですが、
原因はわかりません。
隙間を埋めたいのですが、
わかる方おりましたら、教えてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.1ベストアンサー

  • 回答者： Zimmerman
  • 回答日時：

ぱっと思いつきですが、


余計な改行を取ってみたら？
特に<h1>ロゴ</h1>の下の１行アキ。
    • good
    • 0
    • 件
通報する
この回答へのお礼

そのようでした。
回答ありがとうございます。
HTML5 って不思議。

通報する
お礼日時：2022/02/15 18:17

No.4

  • 回答者： wanderer1
  • 回答日時：

＞line-heigh 1 になっていました。



これはul、liも1ですか？
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： fujillin
  • 回答日時：

こんにちは



ご提示のままのソースであるなら・・

</header>
と
<nav class="global-nav">
の間に全角空白のような1文字があるので、それで1行分の空白行ができているのでは？
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： wanderer1
  • 回答日時：

ブラウザデフォルト値のline-heightが効いてるかもしれません。

    • good
    • 0
    • 件
通報する
この回答へのお礼

line-heigh 1 になっていました。
回答ありがとうございます。

通報する
お礼日時：2022/02/15 17:27

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報