Html CSS边距连接？

下面是google chrome html/css视图的打印屏幕

一个元素在另一个元素下，

边距：10px，因此它们之间的距离应为20px

但事实并非如此。它们相距10像素，就像边缘相连一样


正文{
保证金：0；
背景图片：url（“2.png”）；
背景重复：重复-x；
字体系列：“Verdana”；
字号：17px；
}
#标志{
背景图片：url（“logo.png”）；
宽度：527px；
高度：58px；
背景重复：无重复；
左边距：自动；
右边距：自动；
边缘顶部：7px；
}
.隐藏{
显示：无；
}
.导航{
背景色：#55585d；
高度：自动；
边缘顶部：10px；
边框底部：2个实心#44474c；
边框顶部：2个实心#44474c；
文本对齐：居中；
}
.nav>ul{
列表样式：无；
边际：0px；
填充：0px；
}
.nav>ulli{
显示：内联块；
填充物：5px；
右边距：30px；
字号：700；
}
/*1195px宽度*/
#居中{
宽度：1195px；
左边距：自动；
右边距：自动；
}
#容器{
宽度：864px；
最小高度：500px；
左边距：16像素；
浮动：左；
}
.邮政{
宽度：392px；
身高：453px；
盒影：3px-3px 6px 0px 000000，
-1px 1px 1px 0px#000000；
利润率：10px；
浮动：左；
}
#旁白{
宽度：315px；
浮动：左；
最小高度：500px；
}
.abox1{
利润率：10px；
宽度：279px；
身高：453px；
盒影：3px-3px 6px 0px 000000，
-1px 1px 1px 0px#000000；
}

德夫洛格
德夫洛格


斯特罗纳·戈沃纳


卡蒂戈里


Spis Treści


普拉卡酒店


康塔克


在某些情况下（）元素之间的边距折叠（重叠，一个在另一个之上），这是一种预期行为，因此不是错误

这是其中一个案例，也是您当前的问题：

相邻兄弟姐妹

相邻同级的边距将折叠（除非后面的同级需要通过浮动清除）

首先，您有一些带有该边距的
.post
块，但这些边距运行良好，因为这些块是浮动的。如果从
.post
类中删除
float:left
，您将看到这些块的边距也被折叠


知道存在边距塌陷，您可以在设计布局时将其考虑在内：

页面流从左到右，从上到下。因此，与其定义
页边距顶部
和
页边距底部
，不如只定义
页边距底部


放在一边{
宽度：315px；
浮动：左；
最小高度：500px；
}
.abox1{
利润率：0 10px 20px 10px；
宽度：279px；
身高：453px；
盒影：3px-3px 6px 0px 000000，
-1px 1px 1px 0px#000000；
}

放松点，伙计！这是。为什么我的房子倒塌了/