边距用于在任何定义的边框之外的元素周围创建空间。

边距 margin

CSS 属性用于在元素周围创建空间， 在任何定义的边界之外。使用 CSS，可以完全控制边距。有属性用于设置元素每边（上、右、下和左）的边距。

CSS 具有用于指定每个边距的属性 元素的侧面：

• margin-top
• margin-right
• margin-bottom
• margin-left

所有边距属性都可以具有以下值：

auto - 浏览器计算边距
length - 以 px、pt、cm 等为单位指定边距。
%- 以包含元素宽度的百分比指定边距
inherit - 指定边距应从父元素继承
提示：允许使用负值。

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

可以使用缩写：

margin属性是以下单个保证属性的简写属性【上右下左】：

margin-top
margin-right
margin-bottom
margin-left

边距：25 像素 50 像素 75 像素 100 像素;
+上边距为 25px

• 右边距为 50px
• 下边距为 75px
• 左边距为 100px

p {
  margin: 25px 50px 75px 100px;
}

边距：25 像素 50 像素 75 像素;

• 上边距为 25px
• 左右边距为 50px
• 下边距为 75px

p {
  margin: 25px 50px 75px;
}

边距：25 像素 50 像素;

• 上边距和下边距为 25px
• 左右边距为 50px

p {
  margin: 25px 50px;
}

边距：25px;

• 所有四个边距均为 25px

p {
  margin: 25px;
}

自动值

auto可以将边距属性设置为将元素在其容器内水平居中。然后，该元素将占用指定的宽度和剩余空间将在左边距和右边距之间平均分配。

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

继承值

此示例允许从父元素继承 <p class=“ex1”> 元素的左边距 （<div>）：

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

边距重叠 Margin Collapse

元素的上边距和下边距有时会合并为一个边距，等于两个边距中最大的一个。

这种情况不会发生在左右页边距上！只有上边距和下边距才会出现这种情况！

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}

在上面的示例中，<h1> 元素的下边距为 50px，并且 <h2> 元素的上边距设置为 20px。

常识似乎表明<h1之间的垂直边距> <h2>总共为 70px （50px + 20px）。但由于边距重叠， 实际边距最终为 50px。