最高マージンによって Div が押し下げられるのはなぜですか? それを修正するにはどうすればよいですか?

マージンにより Div が下に押し下げられる: 解決策が明らかに

ページ上の最初に表示される要素に上マージンを適用すると、その要素全体がdiv を使用して下に移動します。これは、ヘッダー セクションで特に顕著です。この問題を解決するには、次の CSS プロパティを親 div に適用します。

overflow: auto;

このプロパティにより、子要素の上マージンによって増加した高さに親 div が自動的に対応できるようになります。

これは、解決策を組み込んだ変更されたサンプル コード スニペットです:

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;
}

overflow: auto プロパティを追加すると、#header div が自動的に展開されます。 h1 要素の高さに合わせて、ヘッダー全体が押し下げられるのを防ぎます。

以上が最高マージンによって Div が押し下げられるのはなぜですか? それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。