`body { margin: 0; ではないのはなぜですか? }` ロゴの上マージンを削除しますか?

CSS でのマージン削除のトラブルシューティング

Web 開発でマージンの問題が発生した場合、初心者プログラマは、次の CSS ルールが適切かどうか疑問に思うかもしれません。

body {
  margin: 0;
}

問題ステートメント

ブラウザの上部と「ロゴ」テキストの間のスペースを除去するために上記のコードを適用すると、失敗することがわかります。次のコードは jsbin で参照できます:

  <style>
    body {
      margin: 0;
    }
  </style>



  <div class="logo">
    <h1 id="Logo">Logo</h1>
  </div>

Answer

提供された CSS ルールは本文のマージンを削除することを目的としていますが、そうでない場合があります。このシナリオでは理想的なソリューションです。次のようなグローバル リセットを使用すると、

* {
  margin: 0;
  padding: 0;
}

が意図しない結果を招く可能性があります。この特定の例では、親要素にパディングがないため、「ロゴ」見出しのマージンが親要素を超えてはみ出しています。

より的を絞ったアプローチをお勧めします。

.logo {
  padding: 10px;
  margin: 0;
}

親のパディングにより、「ロゴ」マージンが親内に残ることが保証されます。すべてのマージンとパディングを削除すると、予期せぬ影響が生じる可能性があるため、グローバル リセットに頼るのではなく、特定の要素に焦点を当てることが推奨されます。

以上が`body { margin: 0; ではないのはなぜですか? }` ロゴの上マージンを削除しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。