margin: 0;の意味について

画像のようなヘッダーを作って見たのですが、

書いたコードを振り返ってみると

HTML
1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="utf-8">
6  <title>manaby</title>
7  <link rel="stylesheet" type="text/css" href="stylesheet.css">
8</head>
9
10<body>
11
12  <header>
13    <div class="container">
14      <div class="header-logo">
15        <img class="logo" src="./second_sozai/header-logo.png">
16      </div>
17      <div class="header-list">
18        <ul>
19          <li>リスト1</li>
20          <li>リスト2</li>
21          <li>リスト3</li>
22          <li>リスト4</li>
23        </ul>
24      </div>
25    </div>
26  </header>
27
28  <div class="top-wrapper">
29  </div>
30
31  <div class="contents-wrapper">
32  </div>
33
34  <div class="footer-manaby">
35  </div>
36
37  <footer>
38  </footer>
39
40</body>
41
42</html>

CSS
1body {
2  margin: 0;
3}
4
5*{
6  font-family: Meiryo;
7}
8
9
10header {
11  height: 90px;
12  width: 100%;
13  background-color: #FE9A2E;
14}
15
16.logo{
17  float: left;
18  height:60px;
19  width:auto;
20  padding:15px 20px 15px 20px;
21}
22
23ul{
24  margin:0px; 
25}
26
27li{
28  list-style:none;
29  float:left; 
30  font-weight: bold;
31  padding-top:50px;
32  padding-left:20px;
33  color:#ffffff;
34}
35
36.header-list {
37  float: left; 
38}
39

というコードなんですが、<ul>タグにmargin:0px;を当てた理由を忘れてしまいました。
このmargin:0px;を外してみると、リスト全体のヘッダー内での下の余白がなくなるんですが、デベロッパーツールで見てみてもボックスモデルの領域の表示は変わらなくて判断ができません。

どなたか教えていただけたら幸いです。

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

回答1件

ベストアンサー

質問者さんがmargin:0px;を割り当てた真意は分からないですが、
各ブラウザ間でデフォルトCSSが異なるため、初期表示を同じにするように「リセットCSS」というものが存在します。
例えばulにmargin:0px;とすることで、あらかじめ設定されているmarginをリセットします。
（書き方を少し突っ込むとmargin:0;でいいのですが…）

自分はとりあえずChromeでしか確認していませんが、user agent stylesheetには下記のようなcssが割り当てられていました。

css
1ul, menu, dir {
2    display: block;
3    list-style-type: disc;
4    -webkit-margin-before: 1em;
5    -webkit-margin-after: 1em;
6    -webkit-margin-start: 0px;
7    -webkit-margin-end: 0px;
8    -webkit-padding-start: 40px;
9}