3

「CSS The Definitive Guide 3rd edition」の 166 ページには、水平マージンに関する動作が記述された段落があります。

水平マージンは折りたたまれないため、親要素のパディング、ボーダー、およびマージンがその子に影響を与える可能性があることに注意してください。要素のマージン (など) が子要素のオフセットを引き起こす可能性があるという点で、効果は間接的です。

この動作について本で提供されている例も理解できません。

http://jsfiddle.net/PjTA3/

HTML:

<div>
    <p>A paragraph</p>
    <p>Another paragraph</p>
</div>

CSS:

div {padding: 30px; background: silver;}
p {margin: 20px; padding: 20px; background: white;}

誰でもこれを説明できますか？どうもありがとう。

4

1 に答える 1

6

議論中のコードの実例を提供するフィドルを作成しました。Chrome または同様の最新のブラウザーを使用している場合は、例の段落を右クリックし、[要素の検査] を選択して、パディングとマージンがどのように相互作用するかを確認できます。

問題の段落は恐ろしく書かれています、私は同意します。「水平マージンは崩壊しない」ということから始まり、アサーションを示すために隣接する水平マージンがない例を示します。ただし、この例では、隣接する垂直マージン (最初の段落の下マージンと 2 番目の段落の上マージン) が特徴であり、これらが折りたたまれていることがわかります(同じスペースを占めています: 1 つの要素を調べてから、もう 1 つの要素を調べてこれを確認します)。

ただし、これは例で示したスタックしないオフセットとは何の関係もありません。つまり、段落の隣接していないマージンが、含まれている div のパディングの端からそれらをオフセットするということです。したがって、最初の段落の上、左、および右端50pxは div の外端からです ( +からのパディングからの20pxマージン) 。<p>30px<div>

この例の正確なキャプションは、次のように記述したほうがよいと思います

原則として、ブロック レベル要素の垂直マージンを除いて、マージン、パディング、ボーダーは折りたたまれません (仕様で定義されている例外を除く)。インライン要素の配置は、垂直寸法の影響を受けません。

編集：

代替キャプションのわずかな不正確さを修正: 例外、および「水平マージンが崩壊しない」という元の段落の主張はまだ証明されていません:これを実証するために、ここで同様のフィドルを作成しました。

この 2 番目の例では、インライン<span>要素を<p>s に置き換えました。これにより、要素が互いに水平方向に自然に流れることがわかります。最初の例とは異なり、2 番目の段落の上マージンが最初の段落の下マージンに折りたたまれています段落の左マージンは最初の右マージンに折りたたまれず、代わりに直後に始まります — それらを40pxバラバラにします.

ちなみに、これはインライン要素の垂直方向のパディング、ボーダー、およびマージンが崩壊することも示しています。これらのスパンの上下のパディングとマージンは、コンテナーからのオフセットに影響しません。

于 2013-03-06T12:27:56.617 に答える