前端必知必会-CSS边距Margin

---

CSS 边距Margin

边距Margin用于在元素周围、任何定义的边框之外创建空间。有一些属性可用于设置元素每侧的边距（顶部、右侧、底部和左侧）。

边距 - 各个侧面

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

• 顶部边距margin-top
• 右侧边距margin-right
• 底部边距margin-bottom
• 左侧边距margin-left
  所有边距属性都可以具有以下值：
• auto - 浏览器计算边距
• 长度 - 以 px、pt、cm 等为单位指定边距
• % - 以包含元素宽度的 % 为单位指定边距
• 继承 - 指定边距应从父元素继承
  提示：允许使用负值。

示例
为 <p> 元素的所有四边设置不同的边距：

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

边距 - 简写属性

为了缩短代码，可以在一个属性中指定所有边距属性。

边距属性是以下各个边距属性的简写属性：

• margin-top
• margin-right
• margin-bottom
• margin-left
  因此，它的工作原理如下：

如果边距属性有四个值：

margin: 25px 50px 75px 100px;

上边距为 25px
右边距为 50px
下边距为 75px
左边距为 100px
示例
使用具有四个值的 margin 简写属性：

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

如果 margin 属性有三个值：

margin: 25px 50px 75px;

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

示例
使用具有三个值的 margin 简写属性：

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

如果 margin 属性有两个值：

margin: 25px 50px;

顶部和底部边距为 25px
右侧和左侧边距为 50px
示例
使用具有两个值的 margin 简写属性：

p {
margin: 25px 50px;
}

如果 margin 属性有一个值：

margin: 25px;

所有四个边距均为 25px
示例
使用具有一个值的 margin 简写属性：

p {
margin: 25px;
}

auto 值
您可以将 margin 属性设置为 auto，以使元素在其容器内水平居中。

然后，元素将占用指定的宽度，剩余空间将在左侧和右侧边距之间平均分配。

示例
使用 margin: auto:

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

inherit 值
此示例允许 <p class="ex1"> 元素的左边距从父元素 (<div>) 继承：

示例
inherit 值的使用：

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

p.ex1 {
margin-left: inherit;
}

CSS 边距折叠

有时两个边距会折叠成一个边距。

元素的顶部和底部边距有时会折叠成一个边距，该边距等于两个边距中最大的一个。

左右边距不会发生这种情况！只有顶部和底部边距才会发生！

请查看以下示例：

示例
边距折叠的演示：

h1 {
边距：0 0 50px 0;
}

h2 {
边距：20px 0 0 0;
}

在上面的示例中，<h1> 元素的底部边距为 50px，而 <h2> 元素的顶部边距设置为 20px。

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

---

总结

本文介绍了的CSS 边距Margin使用，如有问题欢迎私信和评论