ヘッダーに上マージンを追加すると、ヘッダー全体が下に押し下げられるのはなぜですか?

ヘッダー要素のマージン上部の問題

ヘッダー 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;
}

解決策:

この問題を解決するには、overflow:auto プロパティを親に追加します。部これにより、マージンが使用可能なスペースを超えたときに親 div がスクロールされ、ヘッダー div が下に移動することがなくなります。

div#header {
  overflow: auto;
  ...
}

詳細については、次のリンクを参照してください:

以上がヘッダーに上マージンを追加すると、ヘッダー全体が下に押し下げられるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。