css - この場合、マージンの崩壊が発生しないのはなぜですか?

Question

この場合、マージンの崩壊が発生しないのはなぜですか?

<p> First </p>
<p id="second"> Second </p>

p {
    background-color:red;
    margin-top:10px;
    display:inline;
    margin-right:10px;
}
#second {
    margin-left:10px;
}

これら 2 つの間の余白は、10px ではなく 20px になります。なんで？</p>

Answer 1

ドキュメントの引用：

水平マージンが崩れることはありません。

Answer 2

マージンの崩壊は、2 つの垂直ブロック要素間でのみ発生します。
水平要素があり、これらは両方ともインライン要素です。
したがって、マージンの崩壊は発生していません。