Q&A
前提・実現したいこと
初心者でホームページを作っているのですが、
ヘッダーにある空白部分が何をやっても消えません…。
ヘッダーの上の空白をなくしたいです。
発生している問題・エラーメッセージ
ヘッダー上部に空白部分が生じる
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>テスト</title> <meta name="description" content="コーディング"> <link rel="stylesheet" type="text/css" href="html5reset-1.6.1css"> <!-- CSS --> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap" rel="stylesheet"> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <div class="header"> <div class="header-logo">テスト</div> <div class="header-list"> <ul> <li>HOME</li> <li>ABOUT</li> <li>SHOP</li> <li>BLOG</li> <li>CONTACT</li> </ul> </div> </div> <div class="main"> </div> <div class="footer"> </div> </body> </html>
@charset "UTF-8"
/-- 共通部分
-----------------------------------------------/
html {
font-size: 100%;
}
body {
font-family: 'Rubik', sans-serif;
margin: 0;
}
a {
text-decoration: none;
color: #fff;
}
a:hover {
color:#A9F5E1;
}
li {
list-style: none;
float: left;
padding: 30px 20px;
font-size: 1.10rem;
}
/* HEADER
-----------------------------------------------*/
.header {
background-color: #000000;
color: #fff;
height: 80px;
margin: 0;
}
.header-logo {
font-size: 35px;
float: left;
margin-top: 0;
padding: 10px 40px;
}
.footer {
background-color: #000000;
}
試したこと
marginを0にしたり、全角スペースがあるか確認したのですが、
どれも解決できませんでした。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
確認したところ、ヘッダーの上の余白はulタグのmarginでした。
試しに以下のようにulタグのmarginを0にしてみると、ヘッダーの周囲の余白は無くなります。
CSS
1ul { 2 margin: 0; /* ヘッダー周囲の余白を削除する */ 3}
ulタグなどにはブラウザごとにデフォルトのスタイルが適用されているので、今回はそれが影響したようです。
（chromeで見た場合、ul要素の上下には1em（1行分程度）の余白が適用されます。）
英語ですが、以下のstackoverflowの質問と回答が参考になると思います。
参考：Why <ul> adds extra top margin?
ブラウザごとのデフォルトのスタイルを打ち消す方法として「リセットCSS」というものもありますので、一度ご確認いただくと視野が広がると思います。
参考：2020年、モダンブラウザに適したCSSリセットのまとめ
投稿2020/11/14 18:11
総合スコア33
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/15 02:27
2020/11/15 03:28