CSSで背景に余白ができてしまう

HTMLで

  <body>
    <div class="header">
      <div class="header-logo">
        Practice
      </div>
      <div class="header-list">
        <ul>
          <li>練習1</li>
          <li>練習2</li>
          <li>練習3</li>
        </ul>
      </div>
    </div>
    <div class="main">
      <h1>HELLO WORLD<span>.</span></h1>
    </div>
    <div class="footer">
    </div>
  </body>

として、CSSで

body{
  font-family: "Avenir Next";
}

.header {
  background-color: #f7f2b4;
  height: 90px;
}

.header-logo{
  font-size: 36px;
  line-height: 60px;
  padding: 15px 40px;
  float: left;
}

li {
  list-style: none;
  float: left;
  line-height: 30px;
  padding: 30px 20px;
}

.main {
  background-color: #bdf7f1;
  height: 600px;
}

.main h1 {
  font-size: 100px;
}

とした場合、.headerの背景と.mainの背景の間に余白が空いてしまいます。各要素に何も入っていない時は余白がなかったのですが、原因および解決策を教えて頂きたいです。

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

回答2件

ベストアンサー

その余白は、mainクラスのdiv要素の先頭にあるh1要素のマージンに由来し、境界線などが存在しないため、マージンの相殺(統合)が行なわれてdiv要素の外側に出たものです。

マージンの相殺 - CSS: カスケーディングスタイルシート | MDN

試しに、mainクラスのdiv要素にborderを追加すると、マージン相殺が行なわれずに上部のheaderクラスのdiv要素とmainクラスのdiv要素が隙間なく接します。この場合、h1要素のマージンはmainクラスのdiv要素の内部に(div要素の背景色付きで)表示されます。

CSS
1.main {
2    border: 1px solid red;
3    (略)
4}

余白を消すには、h1要素のmarginを0にしてください。

CSS
1.main h1 {
2    margin: 0;
3    (略)
4}

投稿2020/10/22 00:45

Daregada

総合スコア11990

kawahagi

2020/10/22 02:04

理解できました。追加で疑問なのですが、heading要素にはデファルトのmarginがついてるというこでしょうか？そのmarginの大きさとフォントサイズに規則はありますか？

Daregada

2020/10/22 06:17

ブラウザー依存です。たいていは文字の大きさに依存するマージンが上下についています。ブラウザーごとの違いを気にしたくなければ、自分でマージンを0にするかreset系のスタイルシートを導入し、必要なら後でマージンを設定してください。

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

こんにちは。

原因は、親子間のマージン相殺です。

解決方法は、いろいろあります。

.main に display:flow-root をつけるなどして、ブロック整形コンテキストを持たせる。
h1のマージンを消す。
.main にボーダーなどをつけて、親子間のマージン相殺を無効にする。
.main にマイナスマージンをつけて、相殺する。

投稿2020/10/22 00:41

Lhankor_Mhy

総合スコア36960

kawahagi

2020/10/22 02:05

ありがとうございました。色々解決策があるのですね。h1タグのマージンを消してみました！

Lhankor_Mhy

2020/10/22 02:17

ご解決されて何よりです。 https://coliss.com/articles/build-websites/operation/css/user-agent-stylesheets.html

kawahagi

2020/10/22 02:20

追加で質問させて頂きよろしいでしょうか？ heading要素にはデフォルトでマージンがあるため発生するという認識です。 heading要素のmarginの大きさとフォントサイズには規則があるのでしょうか？また、paragraph要素など他の要素にもデフォルトでmarginはついているものなのですか？

Lhankor_Mhy

2020/10/22 02:21

上記URLをご参照ください。

kawahagi

2020/10/22 02:26

きずかなかったです！ありがとうございます！読みこんでみますー

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

あなたの回答