0

<h#>要素のマージン (ユーザー エージェント スタイルシート) がデフォルトで親を押し出さないのはなぜdivですか?

要素は<h2>ブラウザ ウィンドウから押し出されます。

編集:以下を html ドキュメントとして chrome で開きます。div は要素のすぐ隣にあり<h2>ますが、要素のマージンのためにブラウザー ウィンドウから押し出されます。<h2>

編集 2:に a を追加しましmargin-top:50pxた<h2>。divこのマージンの影響を受けないのはなぜですか?

ここに画像の説明を入力

<html>
   <div id="does-not-push-away">
        <h2>Heading<h2>
    <div>
</html>
4

3 に答える 3

2

これはすべてマージンの崩壊に関するものだと思います。3 つの基本的なタイプの 1 つ。MDN の説明から関連する段落を次に示します。

ブロックの margin-top と最初の子ブロックの margin-top を分離する境界線、パディング、インライン コンテンツ、またはクリアランスがない場合、または境界線、パディング、インライン コンテンツ、高さ、最小高さ、または最大値がない場合ブロックの margin-bottom をその最後の子の margin-bottom と分離するための高さ。折りたたまれたマージンは、親の外に出ます。

あなたの親ブロックはあなたの<div id="does-not-push-away">もので、その最初の子はあなたのもの<h2>です。に 1 ピクセルのパディング (または透明な境界線など) を追加する<div>と、すべての<h2>のマージンが「押しのけられる」ようになります。

説明するペンを次に示します: http://codepen.io/MisterGrumpyPants/pen/fLmqF<h2> (要素に適用した margin-bottom で同じマージンの崩壊が発生することに注意してください --)

于 2013-07-23T02:07:33.623 に答える