在网站布局中，块与块之间的空隙可以使布局显得整齐有序，清晰明了。CSSmargin属性用于在元素周围创建空间，即控制元素边框外的距离。可以通过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:1pxsolidblack,margin-top:100px,margin-bottom:100px,margin-right:150px,margin-left:80px,background-颜色：浅蓝色。在浏览器中查看效果。选择此div元素后，四个边距清晰可见。CSSdiv{边框：1px纯黑色；边距顶部：100px；底部边距：100px；右边距：150px；左边距：80px；所有保证金属性。如果margin取四个值，比如margin:25px50px75px100px，表示：上边距25px，右边距50px，下边距75px，左边距100px。注意书写顺序，每个值之间用空格隔开。如果margin取三个值，如margin:25px50px75px，表示：上边距为25px，左右边距为50px，下边距为75px。如果margin取两个值，如margin:25px50px，表示：上下边距为25px，左右边距为50px。如果margin取一个值，比如margin:25px，表示四个方向的margin都是25px。margin属性值的设置是不是和我们之前介绍的属性很像呢？回到样式代码，在这里重写边距样式。注释掉原来的代码，重新定义样式：margin:100px100px150px80px。效果是一样的！现在想一想，CSS为什么要设计这四个值呢？我们还可以将margin属性值设置为auto以使元素在其父元素或其容器内水平居中。元素将占据指定的宽度，剩余空间将在左右边距之间平分。例如，将div的边距属性设置为auto。为了演示效果，添加另一个值为200px的宽度属性。回到html，我们可以看到div所在的容器是body，因此可以推断div在页面水平方向居中显示。验证确实如此，div水平居中。有时，在两个容器的对接处，会出现边沿塌陷的问题，有时也称为边沿塌陷。通常发生在相邻块元素垂直边距和嵌套块元素垂直边距相邻时。例如，此元素的上边距和此元素的下边距将折叠成一个等于两个边距中最大边距的边距。只是强调一下，这不会发生在左右边距上！仅发生在顶部和底部边距上。例如。将h2元素添加到html并填写一些文本。在css中定义h1选择器，声明样式：margin:0050px0。788888定义h2选择器，声明样式：margin:20px000。看看效果。在Elements下的Styles选项卡中，有容器布局的示意图。将鼠标滑到margin区域，可以清楚的看到两个容器之间的距离不是70px，而是margin最大的一个，也就是h150pxbottommargin。崩溃，听起来好像出了什么问题。其实浏览器并没有错。它会认为你重复设置了margin的值，我只能取一个。如果你的需求是两个边距的叠加，你只需要为一个容器定义边距即可！注释掉h2的样式，修改h1的下边距为70px。这一次，两个容器之间的垂直边距是70px！除了相邻的块元素，嵌套块元素的垂直边距也会折叠。对于两个嵌套的块级元素，有时父元素的topmargin会和子元素的topmargin合并，合并后的margin也会取两者中较大的值。另一个例子。用p元素包裹div内的段落。添加样式margin-top:50px到div。定义另一个选择器div>p，并声明样式：margin-top:20px。看一下段落顶部的边距值，没错，是50px文章配套视频链接：https://www.bilibili.com/video...
