負邊緣問題和不一致

Question

我的第一個問題是忽略父元素的填充的技巧。 我知道負向TOP和LEFT邊距會將該元素向更遠的方向移動，從而可能移出其父元素。

我真的很困惑的是消極的右邊距。 我想它會使元素變寬指定的數量。 並帶有負底邊距。它使元素更短。

第二個問題是，大的負邊緣底部似乎顯示不一致。

這裏的演示

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

Answer 1

對於塊元素，你有水平的利潤率描述是正確的。對於塊元素的垂直邊距，它稍有不同。

想象一下，您如何擺放一堆垂直的盒子，並且兩者之間沒有間距。你將從零開始，然後對每個塊，你將它放在那個位置，然後將Y值提高其高度。

現在我們擴展到包含間距。 CSS模型如何工作的簡化視圖是以Y值爲零開始，但是在放置方框，添加頂部邊距以及放置方框之後添加底部邊距之前。實際上它的工作方式稍微複雜一些，因爲在某些情況下，利潤率會崩潰。無論如何，這個簡化的模型足以描述爲什麼高度不會改變：負底部邊距會影響下一個盒子的位置，但不會使盒子本身變大。