内部要素の上マージンが親 Div を置き換えるのはなぜですか?それを修正するにはどうすればよいですか?-CSSチュートリアル-php.cn

内部要素の上マージンが親 Div を置き換えるのはなぜですか?それを修正するにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-12-19 05:38:13

オリジナル

233 人が閲覧しました

Why Does a Top Margin on an Inner Element Displace Its Parent Div, and How Can I Fix It?

ラッパー Div の配置に影響を与えるマージン-トップ

ヘッダーディビジョンなど、ページ上の最初に表示される要素に上マージンを適用する場合、不注意で部門全体を置き換えてしまう可能性があります。これは、ブラウザのデフォルトのカスケード動作の結果です。

この問題を解決するには、次の CSS ルールを親部門に実装することが解決策です。

overflow: auto;

ログイン後にコピー

このルールを指定すると、親分割部分は、内部要素の上マージンに合わせて高さを調整し、分割部分が押し下げられるのを防ぎます。

これを組み込んだ更新されたコードスニペットは次のとおりです。解決策:

div#header {
  width: 100%;
  background-color: #eee;
  position: relative;
  overflow: auto;
}

div#header h1 {
  text-align: center;
  width: 375px;
  height: 50px;
  margin: 50px auto;
  font-size: 220%;
  background: url('/images/name_logo.png') no-repeat;
}

ログイン後にコピー

この手法を実装すると、h1 要素に適用される上部マージンがヘッダー部分の位置に影響しなくなります。

以上が内部要素の上マージンが親 Div を置き換えるのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。