在CSS中使用边距属性。
本文重点论述的是我们每天都不容易找到的保证金；盒模型
接触CSS的人应该知道CSS的盒子模型：
内容边缘被内容内容框（内容框）、类比和内部空白框（填充框）、边框框（边框框）和外部框（空白框）包围。
内容框、内缘框和边框框的背景是由背景属性决定的，外层空间框的背景是透明的。
CSS的margin属性
在页边空白处，有几点可能与我们的直觉不一致：
1、如果边际值是一个百分比，这是计算相对于父元素的内容框的宽度，即使顶部和底部边缘的边缘也都是相同的。因此，即使父元素的高度和宽度不相等，子元素的边缘元素指定同样的比例，这样的子元素的所有方向的保证金计算值相等。
2、边缘和边缘顶部，底部的值是无效的线路非置换元素（不可替代的内联元素）。因此，我们可以指定边缘的顶部和底部设置img元素的边缘而不是顶部和底部边缘的边缘我的元素，如跨度，等等，但他们不会产生任何影响。
相邻边（相邻边）
如果有两个垂直边界，它们之间没有其他垂直边界，但它们不一定互相接触。我们说这两个边缘是垂直连接（垂直相邻），包括四种情况，其中一种满足一种情况。
父元素的顶边距和第一个子元素的最大边距。
父元素的底部边距和最后一个子元素的底部边距。
元素的底部边距和与该元素相邻的同级元素的最大边距。
如果一个元素不产生BFC，不包含子元素的正常流量，最小高度为0，高度为0或汽车，那么它的顶边和底边也垂直连接。
如果两个保证金满足以下三个条件，我们会说两个保证金是相邻的（相邻）。
1。两个边距是垂直连续的，也就是上述四个案例中的一个。
2、保证金的两个元素是所有块级元素的正常流动，在同一个BFC
在3和两个边距之间没有行框（行框），浮动（间隙）、填充和边框之后的间隙。
边缘折叠（折叠边缘）
边折，即相邻的边可以合拢成一个。
例如，一个指定的元素#边距是10px，和元# B下面指定边距是20px，像这样：
#元素和元素# B重叠位置的边缘顶部边缘的底部。他们之间的距离是20px，即元素# B底边的长度，这是边缘折叠现象。针对这一现象，可以理解为：
利润的定义和其他箱之间的最小距离，元#指定边距为10px，说明元# B下面至少有10 px的距离。它指定一个最小值，所以实际的距离可以大于这个。
元素# B下面的元素#也设置边距为20px，如果它不折，他们之间有一个30px距离。如果是折叠的距离为20px，那么元#一缘底要求至少10 px的距离。元素# B，其边缘上的要求是至少20px距离，它也满足了。
而缘折的存在，其实是为了在视觉上显得更美，更接近设计师的期待。
边折叠规则
不是所有的保证金都可以折叠，我们需要满足以下条件：
垂直相邻的边可以折叠，水平的边缘从不折叠。
根元素（即HTML元素）的边距不会折叠。
如果一个元素，它的上缘和下缘相邻，并且在浮动（间隙）之后有一个明显的间隙，边缘兄弟的边缘元素折叠，折叠的边缘，但不与母界边缘折叠。
需要注意的是，保证金只需一次折叠，符合要求的多个保证金可以折叠成折叠的保证金（折叠的保证金）。
如果折叠边由边A等折叠起来，如果边距x与边A相邻，我们也认为边x与折叠边相邻。
折叠后的边距大小
当两个或两个以上的保证金被折叠时，保证金的价值被计算如下：
如果保证金是肯定的，就尽量多收。
如果在边缘有正面或负面的，最大的正加最小的负数（如果是20px幅度最大，和最小的保证金是20px，然后计算值0）。
如果保证金都是负数，则最低限额为负。
几个思考题
浮动，定位元件的边缘不与任何其他元素的边缘重叠，包括它的子元素。
这是因为浮动元素的正常流动，所以它是不与同流其他相邻的元素，不是因为内容与自然相邻；箱浮动元素会形成一个新的BFC，所以浮动元素和子元素和不在同一平，他们的利润也不能折叠。定位元件可以以同样的方式获得。
对内联块元素不与其他元素的margin折叠，包括它的子元素。
因为边缘折叠只发生在块级元素，因此保证金内联块元素而不是兄弟元素的折叠，因为内联块盒子的内容将形成一个新的BFC，所以内联块元素本身不会和子的边缘的褶皱元素
几颗栗子折在边上
板栗1
如果两个保证金满足以下三个条件，我们会说两个保证金是相邻的（相邻）。
在两个边距之间没有线框（线框），浮动（间隙）、填充和边框之后的间隙。
在这种情况下，我们可以通过添加填充来防止边距的折叠：
如果#容器不下架，#容器底部边缘和#内底边缘是相邻的，所以它们的折叠，并#内。#容器的元素，所以我们可以看到#容器元素的高度成10px，和#内为红色背景显示
当一个较低的帧添加到#容器，两缘从边界分离，他们不相邻，所以他们不能折叠，所以我们可以看到#容器支持为20px，哪里10px的#内的高度，和10px是#内底缘，和缘是透明的，所以蓝色背景的#容器的一部分。
板栗2：
如果两个保证金满足以下三个条件，我们会说两个保证金是相邻的（相邻）。
保证金的两个元素是所有块级元素的正常流动，并在同一平
我们块边缘折叠通过创建一个新的BFC：
例如，在同一个图的#容器内的元素属于一个BFC #。#容器顶部边缘和#内顶部边缘的褶皱，底边是一样的。
但如果#容器和#内在是不同的，顶部边缘和底部边缘不折叠，如：
添加一个溢出：隐藏属性的#容器元素，使盒单独生成BFC的内容，和#内部独立的BFC，所以#容器和#内是不同的两个BFC，所以他们不能折叠边缘。
板栗3：
如果一个元素，它的上缘和下缘相邻，并且在浮动（间隙）之后有一个明显的间隙，边缘兄弟的边缘元素折叠，折叠的边缘，但不与母界边缘折叠。
一个灰色的背景设置为母元#容器，和高度不定，所以高度会随着内容的扩大，而利润将50px。
有一个红色的浮动元素#浮动，高度和宽度设置为40px。
设置15px保证金#清除，和元素的高度，填充和边缘都是0，所以顶部边缘和底部边缘#清除元素相邻。该元素的位置如下图所示。
因为#清除元素清除左浮动，这#清除元件向下移动。
和#清除元件和# slibling元的保证金是折叠的，所以你可以看到他们的位置重叠。
由于这种规则的存在，不可折叠，折叠后的#容器底部的边缘的边缘，所以#容器高度拉伸。
如果他们没有这个规则，他们也应该有#折叠容器的底部边缘，如：
上面的这张照片，摆脱对# clear属性清除元素之后，它不符合这个规则，所以你可以看到#容器高度只有40px，它是红色的浮动元素的高度，#清除元素，#同级元素的边缘#容器元素折叠成A.
以上是关于CSS在页边空白属性方面的介绍，希望对学习CSS中的页边空白有帮助。