负边缘问题和不一致

Question

我的第一个问题是忽略父元素填充的技巧。 据我所知，负TOP和LEFT边距将该元素移动到可能移出其父元素的那个方向上。

我真正感到困惑的是负利润率。 我想它会使元素变宽一个指定的量。 并且具有负BOTTOM边距。它会缩短元素。

第二个问题是，大的负利润率底部似乎表现不一致。

这是演示

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

Answer 1

对于块元素，您使用水平边距描述的内容是正确的。对于块元素的垂直边距，它略有不同。

想象一下，如何垂直布置一堆盒子，它们之间没有间距。你从Y为0开始，然后对于每个块，你将它放在那个位置，然后将Y值推高到它的高度。

现在我们扩展它以包括间距。 CSS模型如何工作的简化视图是从Y值开始，如前所述，但在放置框之前，添加上边距，并在放置框之后，添加下边距。它的实际工作方式有点复杂，因为在某些情况下边距会崩溃。无论如何，这个简化的模型足以描述为什么高度不会改变：负的底部边缘将影响下一个框的放置，但不会使框本身变大。