内側の div の余白のスペースで最も外側の div に背景色が表示されない理由を誰か説明できますか?
<div style="background-color:yellow;">
<div style="margin-top:10px;background-color:black;color:white;">
Why isn't the background color yellow inside my top margin?
</div>
</div>
質問する
836 次
5 に答える
4
div はブロック要素ですが、(改行を作成する以外に) 単独でスペースを占有しないため、内側の div は外側の div 内の使用可能なすべてのスペースを埋め、黄色の背景をマスクします。最も外側の div にパディングを追加すると、黄色が表示されます。
于 2013-09-12T18:24:53.270 に答える
2
これは「マージン崩壊」として知られています。
CSS では、2 つ以上のボックス (兄弟である場合とそうでない場合があります) の隣接するマージンを結合して、1 つのマージンを形成できます。このように組み合わされた余白はつぶれていると言われ、結果として生じる組み合わされた余白はつぶれた余白と呼ばれます。
他の回答に見られるように、親にpaddingまたはborderを追加すると、マージンが崩壊するのを防ぐことができます。
ここで説明されている tarkabak の方法に基づいて、次の CSS をコンテナーに適用することにも成功しました。(とのブラウザの互換性には制限があることに注意してください。):before:after
.prevent-margin-collapse:before,
.prevent-margin-collapse:after
{
content: "\00a0"; /* No-break space character */
display: block;
overflow: hidden;
height: 0;
}
<div style="background-color:yellow;" class="prevent-margin-collapse">
<div style="margin-top:10px;background-color:black;color:white;">
Why isn't the background color yellow inside my top margin?
</div>
</div>
于 2013-09-12T18:31:35.567 に答える
1
他の回答に加えて、これはマージンの崩壊の問題です。この特定のケースには、「親要素と子要素の間の余白の縮小」セクションが適用されます。
更新: CSS3 のボックス モデル仕様から直接引用した、このトピックに関するステートメントを次に示します(CSS2 仕様内でもほぼ同じ文を見つけることができます)。
特定の隣接するマージンが組み合わされて、1 つのマージンが形成されます。それらのマージンは「崩壊」すると言われています。空でないコンテンツ、パディング、境界領域、またはそれらを分離するクリアランスがない場合、余白は隣接しています。
于 2013-09-12T18:27:41.420 に答える
0
見たいものを実現するには、html を次のように変更します。
<div style="background-color:yellow; padding-top:10px;">
<div style="background-color:black;color:white;">
Why isn't the background color yellow inside my top margin?
</div>
</div>
その理由は、外側の div には幅が設定されておらず、そのコンテンツのサイズのみを取得するためです。
于 2013-09-12T18:23:40.137 に答える
0
他の場所からプロパティを継承しないことに関係があると思います。
<div style="background-color:yellow; position: fixed;">
<div style="margin-top:10px;background-color:black;color:white;">
Why isn't the background color yellow inside my top margin?
</div>
</div>
于 2013-09-12T18:24:53.853 に答える