7

HTML 5 ドキュメントに境界線を追加すると、ページ要素が移動するという問題が発生します。

含まれているヘッダー要素 (グレー) が画面上部に表示されることを期待していましたが、内側の div (赤) からマージンを取っているようです。ただし、ヘッダーに境界線を追加すると、予想どおりの場所に表示され、赤い内側の div がわずかに移動するだけです!

（1枚目：フチなし、2枚目：フチあり）

境界はないボーダー付き

ヘッダー要素の代わりに div を使用し、マージンとパディングを 0 に設定し、HTML4 doctype などを使用して、相対または絶対配置を設定しようとしました。HTML は検証されます。これはすべてを取り除いた HTML ですが、それでも機能しません。最新の Chrome と FF で発生しています。

ヘルプ！！私は何を逃しましたか?? または回避策（境界線を維持する以外）はありますか？

HTML:

<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
</head>
<body>
    <header><div id="mydiv"></div></header>
    <div id="content"><p>hello</p></div>
</body>
</html>

CSS:

header {background-color:#CCCCCC; width:960px; height:430px;}
#mydiv {width:960px; height:320px; margin:80px 0px 0px 0px; background-color:#CC0000; }
4

3 に答える 3

11

この問題は、「マージンの崩壊」と呼ばれるものから発生します。それは簡単です: 隣接する 2 つのマージンが 2 つのうちの最も高いものに折りたたまれます (2 つと言いますが、それ以上になる可能性があります)。

あなたの場合、「#mydivs」margin-top- 80px - が「ヘッダーmargin-top- 0px」に触れています。それらは隣接しています - それらの間に要素はなく、パディングもボーダーもありません。

したがって、余白は 2 つのうちの最上位 (80px) に折りたたまれ、親子階層の最上位の要素に適用されますheader。この場合は です。

この問題の解決策の 1 つは、余白の間に何かを入れることです。パディングまたはヘッダーの境界線のいずれかが正常に機能します。

header {
  border-top: 0.1em solid rgba(0,0,0,0);
}

2 番目の解決策 (私の好み) は、親要素に新しいブロック フォーマット コンテキストを作成させることです。そうすれば、マージンが子のマージンと一緒に崩れることはありません。

ブロックの書式設定コンテキストを作成するにはどうすればよいですか? 考えられる方法は 4 つあります。

  1. 浮かせることで。
  2. 「それを絶対にする立場」。
  3. 次のいずれかの表示を追加します: 「table-cell」、「table-caption」、または「inline-block」。
  4. 目に見える以外のオーバーフローを追加します。

マージンが崩壊するのを防ぐために、これらの 4 つのいずれかを実行できます。私は通常、4 番を使用します) - オーバーフローを auto に設定します。

header {
  overflow: auto;
}

親子マージンの崩壊は基本的にこれで終わりです。兄弟間でマージンが崩壊することもあり、ルールはほとんど同じです。2 つの隣接するマージンは、2 つのうちの最も高いものに崩壊します。そうでないのは解決策です。

これがマージン崩壊の素晴らしい説明です- http://www.howtocreate.co.uk/tutorials/css/margincollapsing

于 2012-07-26T01:58:57.480 に答える
2

これは、マージンの縮小と呼ばれます。paddingこれらは、親要素 (この場合は) に追加することで克服できます<header>。

コード (パディングあり、パディングなし):

に注意してpadding:0.001em;ください。これにより、余白が崩れなくなりますが、にスペースは追加されません<header>。

header {padding:0.001em; background-color:#CCCCCC; width:960px; height:430px;}
#mydiv {width:960px; height:320px; margin:80px 0px 0px 0px; background-color:#CC0000; }
于 2012-07-26T01:58:45.137 に答える
1

bfrohs answer のマージンの崩壊へのリンクは、私にとって有効な解決策を見つけるのに役立ちました。この問題を抱えている他の人を助けるかもしれません。

絶対配置された div は崩壊しないため、ヘッダー要素を相対的にし、内側の div を絶対的にすると、パディングやマージンでスペースを追加することなく正しい配置が得られます。

作業例: http://jsfiddle.net/8QPGJ/

(ポジショニングなし: http://jsfiddle.net/8QPGJ/1/ )

于 2012-07-26T02:20:14.043 に答える