3

一部のCSSマージンが崩壊する理由と崩壊しない理由を見つけるために、いくつかのテストを実行しています。私は次のテストコードを持っています：

<div id="seconddiv" style="margin-top:10px; margin-bottom:10px;">
    <p style="height:200px; margin-top:5px; margin-bottom:5px;">This is the first paragraph in  the second div!This paragraph is 200px tall.</p>
    <p style="height:300px; margin-top:5px; margin-bottom:5px;">This is the second paragraph in the second div!This paragraph is 300 px tall.</p>
    <p style="height:400px; margin-top:5px; margin-bottom:5px;">This is the third paragraph in the second div!This paragraph is 400px tall.</p>
</div>

divの高さを正確に取得しようとしていますが、scrollHeightは「910px」を返します。何故ですか？マージンが含まれていないため、scrollHeightとして「900px」を期待していました。

マージンの一部が<p>崩壊し、高さでカウントされましたか？なぜ他の人ではなく一部の人。マージンの高さのさまざまな組み合わせを試しましたが、何が起こっているのかを示す値はありません。

4

3 に答える 3

9

「マージン崩壊」の意味を理解していないと思います。

次の例では、この単純化されたマークアップを使用します。

HTML:

<div>
   <span>A</span>
   <span>B</span>
   <span>C</span>
</div>

CSS:

span {
    display: block;
    height: 100px;
    margin: 5px 0;
}

各余白を個別の間隔として表示する代わりに、要素の上部と下部の余白が兄弟 (または、前/次の兄弟が存在しない場合は親*) 要素と結合され、その間の間隔が最大の余白になります。

マージンの崩壊がない場合、上記のマークアップは次のように表示されます。

+div-----+
| margin |
|+span--+|
||A     ||
|+------+|
| margin |
| margin |
|+span--+|
||B     ||
|+------+|
| margin |
| margin |
|+span--+|
||C     ||
|+------+|
| margin |
+--------+

margin-collapse を使用すると、マークアップは次のように表示されます。

  margin
+div-----+
|+span--+|
||A     ||
|+------+|
| margin |
|+span--+|
||B     ||
|+------+|
| margin |
|+span--+|
||C     ||
|+------+|
+--------+
  margin

div の高さについてこれが意味することは、各要素の高さとそれらの間のマージンが含まれることです。

私の例では、高さは100 + 5 + 100 + 5 + 100 = 310です。

あなたの例では、高さは200 + 5 + 300 + 5 + 400 = 910です。

*仕様で説明されているように、パディング、ポジショニング、およびフローティングを含む追加の複雑さがあります。

于 2012-09-18T17:09:12.173 に答える
1

ボックスモデルにマージンが追加されるため、ケースの高さは elem の高さ + マージンになります。ただし、隣接する要素にマージンがある場合、マージンは崩壊し、追加される2つに対して最大が勝ちます。ここでそれを説明する良い記事 http://www.960development.com/understand-css-margins-collapsing/

于 2012-09-18T17:04:40.917 に答える
0

scrollHeight戻り値

オブジェクトのコンテンツの上端と下端の間の距離

例のすべてのマージンが折りたたまれても、2 番目のpマージンには上下に 5 ピクセルのマージンがあり、エッジ間の合計距離にカウントされます。

つまり、900px + 5px + 5px = 910px です。

簡単にするために、次の例を確認してください。

<div id="seconddiv" style="margin-top:10px; margin-bottom:10px;">

    <!--
    Top edge is first p's top position (without top margin)
    -->

    <p style="height:100px; margin-top:5px; margin-bottom:5px;">
    First p adds 105px (100px height + 5px bottom margin collapsed) = 105px
    </p>
    <p style="height:100px; margin-top:5px; margin-bottom:5px;">
    Second p adds 105px (100px height + 5px bottom margin collapsed) = 210px
    </p>
    <p style="height:100px; margin-top:5px; margin-bottom:5px;">
    Third p adds 105px (100px height + 5px bottom margin collapsed) = 315px
    </p>
    <p style="height:100px; margin-top:5px; margin-bottom:5px;">
    Last p adds 100px (100px height) = 415px
    </p>

    <!--
    We're at the bottom edge. Margins are excluded, the total height is 415px
    -->

</div>​
于 2012-09-18T17:22:04.653 に答える