共计 2034 个字符，预计需要花费 6 分钟才能阅读完成。
在网站布局中，区块间的空隙能够使布局显得整齐有序，清晰明了。
CSS 边距属性用来在元素四周发明空间，也就是管制元素边框外的间隔。能够通过 margin-top，margin-right，margin-bottom，margin-left 等属性设置元素的上边、左边、下边和右边的外边距。
所有的边距属性都有以下值：
auto – 浏览器主动计算的边距。
length – 以 px、pt、cm 等为单位指定边距。比方 10px，24pt，0.5cm 等。
% – 以父元素宽度的百分比来指定边距。比方 10%。
这里的 pt 是英文 point 的简称，是一个相对单位，中文称之为“磅”，罕用于印刷中，1 磅 =0.376 毫米。另外 length 和 % 都能够取负值，示意缩小外边距的空间大小。
创立文件夹下创立 margin.html 文件，和 margin-style.css 文件。构建根底代码。引入内部款式。增加一个 h1 元素和一个 div 元素，别离填入一些文本。
在 margin-style.css 文件，定义 div 选择器，申明款式：border: 1px solid black，margin-top: 100px，margin-bottom: 100px，margin-right: 150px，margin-left: 80px，background-color: lightblue。
在浏览器中查看成果。选中这个 div 元素，四个边距清晰可见。
CSS
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}为了简化代码，能够在一个 margin 属性中指定所有的边距属性。
如果 margin 取四个值，比方 margin: 25px 50px 75px 100px，则示意：上边距为 25px、左边距为 50px、下边距为 75px、右边距为 100px。留神书写程序，每个值用空格隔开。
如果 margin 取三个值，比方 margin: 25px 50px 75px，则示意：上边距为 25px，左右边距为 50px，下边距为 75px。
如果 margin 取两个值，比方 margin: 25px 50px，则示意：顶部和底部的边距为 25px，左右边距为 50px。
如果 margin 取一个值，比方 margin: 25px，则示意：四个方向边距都是 25px。
这个 margin 边距属性值的设置，是不是很像咱们之前介绍的哪个属性？
回到款式代码，改写一下这里的边距款式。正文掉原来的代码，从新定义款式：margin: 100px 100px 150px 80px。
成果是一样的！
当初，大家思考一下，CSS 为什么要设计这四种取值的写法呢？
咱们也能够将 margin 属性值设置为 auto，使元素在其父元素内，或其容器内程度居中。该元素会占用指定的宽度，残余的空间将在左右边距之间平分。
比方，将 div 的 margin 属性值设置为 auto。为了演示成果，再增加一个 width 属性，值为 200px。
再回到 html，咱们看，div 所在的容器为 body，因而能够推断出，div 在页面的程度方向上居中显示。
验证一下，果然是这样的，div 程度居中了。
有时，在两个容器的邻接处，会呈现边距塌陷的问题，有时也称之为 margin 塌陷。个别产生在相邻块元素垂直边距和嵌套块元素垂直边距邻接的时候。
比方，这个元素的顶部边距和这个元素的底部边距，会被折叠成一个繁多的边距，这个边距等于两个边距中最大的那个。
强调一下，这种状况不会产生在左右边距上！只会产生在顶部和底部的边距上。
举个例子。
在 html 中增加一个 h2 元素，填入一些文本。
在 css 中定义 h1 选择器，申明款式：margin: 0 0 50px 0。788888 定义 h2 选择器，申明款式：margin: 20px 0 0 0。
看看成果。在 Elements 下的 Styles 页签中，有一个容器布局的示意图，鼠标滑到 margin 这个区域，清晰的看到：两个容器的间距并不是 70px，而是边距中最大的那个，也就是 h1 的下边距 50px。
塌陷，听起来像是出了问题，其实浏览器并没有错，它会认为你反复设置了边距的值，我只能取一个。如果你的需要是两个边距的叠加，只须要给一个容器定义边距就能够了！正文掉 h2 的款式，批改 h1 的下边距为 70px。这一次，两个容器的垂直边距就是 70px 了！除了相邻块元素外，嵌套块元素垂直边距也会塌陷。两个嵌套关系的块元素，有时父元素的上边距会与子元素的上边距也会产生合并，合并后的边距也为两者中的较大的值。
再举个例子。
把 div 里的段落用一个 p 元素包裹起来。
给 div 增加一个款式 margin-top: 50px。再定义一个选择器 div > p，申明款式：margin-top: 20px。
看一下段落顶部的边距值，没错，是 50px
文章配套视频链接：https://www.bilibili.com/vide…