css - 负边距问题和不一致

Question

我的第一个问题是忽略父元素的填充的技巧。我知道负的 TOP 和 LEFT 边距使该元素在可能移出其父元素的方向上移动得更远。

我真正感到困惑的是负的右边距。我想它会使元素变宽指定的量。并且具有负底边距。它使元素更短。

第二个问题是大的负边距底部似乎显示不一致。

这是演示

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

Answer 1

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

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

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