議論中のコードの実例を提供するフィドルを作成しました。Chrome または同様の最新のブラウザーを使用している場合は、例の段落を右クリックし、[要素の検査] を選択して、パディングとマージンがどのように相互作用するかを確認できます。
問題の段落は恐ろしく書かれています、私は同意します。「水平マージンは崩壊しない」ということから始まり、アサーションを示すために隣接する水平マージンがない例を示します。ただし、この例では、隣接する垂直マージン (最初の段落の下マージンと 2 番目の段落の上マージン) が特徴であり、これらが折りたたまれていることがわかります(同じスペースを占めています: 1 つの要素を調べてから、もう 1 つの要素を調べてこれを確認します)。
ただし、これは例で示したスタックしないオフセットとは何の関係もありません。つまり、段落の隣接していないマージンが、含まれている div のパディングの端からそれらをオフセットするということです。したがって、最初の段落の上、左、および右端50px
は div の外端からです ( +からのパディングからの20px
マージン) 。<p>
30px
<div>
この例の正確なキャプションは、次のように記述したほうがよいと思います
原則として、ブロック レベル要素の垂直マージンを除いて、マージン、パディング、ボーダーは折りたたまれません (仕様で定義されている例外を除く)。インライン要素の配置は、垂直寸法の影響を受けません。
編集:
代替キャプションのわずかな不正確さを修正: 例外、および「水平マージンが崩壊しない」という元の段落の主張はまだ証明されていません:これを実証するために、ここで同様のフィドルを作成しました。
この 2 番目の例では、インライン<span>
要素を<p>
s に置き換えました。これにより、要素が互いに水平方向に自然に流れることがわかります。最初の例とは異なり、2 番目の段落の上マージンが最初の段落の下マージンに折りたたまれています段落の左マージンは最初の右マージンに折りたたまれず、代わりに直後に始まります — それらを40px
バラバラにします.
ちなみに、これはインライン要素の垂直方向のパディング、ボーダー、およびマージンが崩壊することも示しています。これらのスパンの上下のパディングとマージンは、コンテナーからのオフセットに影響しません。