HTMLをブラウザで表示した際、縁にスペースができてしまいます

前提・実現したいこと

HTMLをブラウザで実行したときにできるスペースを無くしたいです

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

少し見づらいですが、HTMLをブラウザで表示した際、ヘッダーの上と左右に少しスペースができてしまいます

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="jp">
3<head>
4    <meta charset="UTF-8">
5    <title>模写コーディング１</title>
6    <link rel="stylesheet" href="stylesheet.css">
7</head>
8<body>
9    <header>
10
11    </header>
12</body>
13</html>

CSS
1header{
2    height: 73px;
3    background-color: #1b1310;
4}

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

回答2件

ベストアンサー

ブラウザでデフォルトで設定されているスタイルシートがあるためじゃないでしょうか。
こんな感じで上書いてみるとうまくいくと思います。

body {  
    margin:0;
    padding:0;
}

投稿2020/09/07 06:21

mocchiri

総合スコア47

デフォルトでbodyが持っているmarginかと思います。

これを調整すると良いです。

蛇足：
これに限らずHTMLのタグにはそれぞれ「デフォルトで持っている設定」があります。
ブラウザによって微妙に違うものもあります。
そのため、マルチブラウザ対応を加味する場合「リセットCSS」というのを最初に適用させ、
全てのタグに対しての設定を無効化したうえでレイアウトを組むことが良くあります。

投稿2020/09/07 06:21

編集2020/09/07 06:24