HTMLでページ上部の余白を消す方法

前提・実現したいこと

HTMLでWebページ上部のナビゲーションを作成しているのですが、以下のCSSのコードのようにページ全体のmarginやpaddingを0pxに設定しているにも関わらずページ最上部に余白ができてしまいます。これを消すにはどうしたらよいのでしょうか。

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

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5　<meta charset="utf-8">
6　<meta name="viewport" content="width=device-width, initiai-scale=1,shrink-to-fit=no">
7　<title>タイトル</title>
8
9</head>
10
11<body>
12  <!-- ナビゲーション -->
13  <nav>
14    <ul>
15      <li><a href=”#”>TOP</a></li>
16      <li><a href=”#”>ABOUT</a></li>
17      <li><a href=”#”>MENU1</a></li>
18      <li><a href=”#”>MENU2</a></li>
19      <li> <a href=”#”>CONTACT</a></li>
20    </ul>
21  </nav>
22  <!-- ページ概要 -->
23  <header>
24    <div class="about">
25      <h1>ページ概要</h1>
26      <img src="～">
27      <p class="lead">ページ説明
28        <br>ページ説明</p>
29    </div>
30  </header>

CSS
1* {
2  padding: 0px;
3  margin: 0px;
4}
5
6nav {
7  text-align: center;
8  background-color: #ffff01;
9}
10
11nav ul {
12  margin: 0 ;
13  padding: 0 ;
14}
15
16nav ul li{
17  list-style: none;
18  display: inline-block;
19  width: 10%; 
20}
21
22nav ul li a {
23  text-decoration: none;
24  color: #333;
25}
26
27nav li:hover{
28  border-bottom: 2px solid #FF7A37; 
29}
30
31header {
32  text-align: center;
33}
34
35header p{
36  font-size: 1.3em;
37}
38

試したこと

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

itagagaki

2021/08/21 06:36

質問に書かれたコードで試したところ問題は再現しませんでした。書かれていない別のコードが関わっているのではないでしょうか。

Kelvin525

2021/08/21 06:45

回答ありがとうございます。今から周辺のコードも合わせて記載するので、改めて確認お願いいたします。

Kelvin525

2021/08/21 06:55

レイアウトに関する記述はこれで全てだと思います。また何か問題点があればご連絡ください。

m.ts10806

2021/08/21 07:20

どういう画面表示になりるのか画面キャプチャも提示されたほうが良いと思います。

Kelvin525

2021/08/21 07:44

m.ts10806さん、ご指摘ありがとうございます。次回、質問する際には念頭に置いておきます。

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

回答2件

ベストアンサー

ここを半角にしてみてください。

HTML
1　<meta charset="utf-8"><!--
2↑ 全角空白が入っている -->
3　<meta name="viewport" content="width=device-width, initiai-scale=1,shrink-to-fit=no"><!--
4↑ 全角空白が入っている -->
5　<title>タイトル</title><!--
6↑ 全角空白が入っている -->

投稿2021/08/21 07:18

編集2021/08/21 07:18