子要素の上部マージンが親 Div を押し下げるのはなぜですか?

マージントップが親 Div を押し下げる: 問題の理解と修正

多くの開発者は、トップマージンを親 Div に適用するときに特有の問題に遭遇します。ページ上の最初に表示される要素: 親 div がプッシュダウンされます。この動作の原因を詳しく調べて解決策を提供するために、次のコード スニペットを分析してみましょう。

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

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

このコードは、50 ピクセルのマージンを含むネストされた h1 要素を持つヘッダー div を定義します。通常、このマージンにより、h1 とヘッダー div の上端の間のスペースが増加すると予想されます。ただし、その代わりに、ヘッダー div 全体が 50px 押し下げられます。

なぜこれが起こるのかを理解するには、「ブロック フォーマット コンテキスト」を考慮する必要があります。ページ上の最初に表示される要素に適用されると、上部マージンによってブロックの書式設定コンテキストがリセットされ、親 div がプルダウンされます。

この問題の解決策は、overflow: auto を親 div に適用することです。 。これにより、親 div は、上マージンの h1 を含む子要素に合わせて高さを自動的に調整できるようになります。

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

overflow: auto を追加することで、ヘッダー div の垂直方向のサイズ変更が可能になり、ヘッダー div のサイズが変更されるのを防ぎます。 h1 要素に上マージンが追加されたときに押し下げられるのを防ぎます。

以上が子要素の上部マージンが親 Div を押し下げるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。