`body { margin: 0; ではないのはなぜですか? }` ロゴの上マージンを削除しますか?-CSSチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-12-28 08:54:10

オリジナル

174 人が閲覧しました

Why Isn't `body { margin: 0; }` Removing My Logo's Top Margin?

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

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

body {
  margin: 0;
}

ログイン後にコピー

問題ステートメント

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

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

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

ログイン後にコピー

Answer

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

* {
  margin: 0;
  padding: 0;
}

ログイン後にコピー

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

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

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

ログイン後にコピー

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

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