Css 100%的奇怪计算

我有以下结构和布局：

问题： 为什么

div#content

的

margin top:6%

计算为比

div#header

更多的像素

注意：两个元素的父元素都有

高度：100%

设置，就像

div#top container

设置的一样。

我有一种强烈的感觉，这与

div#header

和

div#content

是浮动的这一事实有关，但我真的不明白它为什么会这样

百分比是根据生成的框的包含块的宽度计算的。请注意，“页边距顶部”和“页边距底部”也是如此

从

百分比是根据生成的框的包含块的宽度计算的。请注意，“页边距顶部”和“页边距底部”也是如此

仔细阅读说明书

该百分比是根据管道的宽度计算的 生成的框的包含块。请注意，这是真实的 “保证金上限”和“保证金下限”也是如此

仔细阅读说明书

该百分比是根据管道的宽度计算的 生成的框的包含块。请注意，这是真实的 “保证金上限”和“保证金下限”也是如此

---

这很奇怪。我一直认为

顶部

和

底部

边距是从垂直高度计算的。不管怎么说，既然你在

宽度上使用了**，那就把它标记为答案，这很奇怪。我一直认为
顶部
和
底部
边距是从垂直高度计算的。无论如何，在
width