css - Negative margins questions and inconsistencies

Question

My first question is with the trick of ignoring the parent element's padding. I understand that negative TOP and LEFT margin moves that element farther in that direction where it can possibly move out of its parent element.

What i'm really confused is with negative RIGHT margins. I suppose that it makes an element wider by a specified amount. And with negative BOTTOM margins. It makes the element shorter.

Second question is that large negative margin-bottom seem to display inconsistently.

Here's the demo

http://jsbin.com/ehawey/1/edit

Answer 1

ブロック要素については、横余白で説明した内容が正しいです。ブロック要素の垂直マージンについては、少し異なります。

たくさんの箱を縦に並べて、間に隙間を作らないことを想像してみてください。Y を 0 にして開始し、ブロックごとにその位置に配置し、Y 値をその高さだけ進めます。

これを拡張して、間隔を含めます。CSS モデルがどのように機能するかを簡単に説明すると、前と同じように Y 値 0 から開始しますが、ボックスを配置する前に上マージンを追加し、ボックスを配置した後に下マージンを追加します。場合によってはマージンが崩壊するため、実際の動作はもう少し複雑です。とにかく、この単純化されたモデルは、高さが変わらない理由を説明するのに十分です。負の下部マージンは、次のボックスの配置に影響しますが、ボックス自体は大きくなりません。