CSS 外边距：Margin

---

Margin - 外边距

在CSS中，外边距（Margin）是元素周围的空间，它定义了元素与其他元素之间的距离。Margin没有背景颜色，是完全透明的。

你可以通过使用单独的属性，如margin-top、margin-bottom、margin-right和margin-left，来对上、右、下、左的外边距进行设置。另外，为了缩短代码，也可以使用一个属性margin来指定所有边距，例如：margin: 25px 50px 75px 100px代表上边距为25px，右边距为50px，下边距为75px，左边距为100px。

同时，所有的CSS边距属性也支持简写属性，例如：margin: 25px代表所有的四个边距都是25px。

Margin - 单边外边距属性

在CSS中，外边距（Margin）属性可以用来控制元素周围的空间，它是一种单边外边距属性，也就是说，它可以单独改变元素的上，下，左，右边距。

例如，你可以设置margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;来给元素添加不同方向的外边距。

另外，为了缩短代码，也可以使用简写属性来指定所有边距，例如：margin: 25px 50px 75px 100px代表上边距为25px，右边距为50px，下边距为75px，左边距为100px。

需要注意的是，如果使用负值作为外边距，可能会导致元素重叠显示其他元素，这点在使用时要注意避免。

Margin - 简写属性

Margin是CSS中的一个简写属性，用于在一个声明中设置所有当前或者指定元素的外边距。

该属性可以有1到4个值。当只有一个值时，它将应用于所有四个边距。当有两个值时，第一个值应用于上下边距，第二个值应用于左右边距。当有三个值时，第一个值应用于上边距，第二个值应用于左右边距，第三个值应用于下边距。当有四个值时，它们分别应用于上、右、下、左的边距，顺时针计算。

Margin可以接受任何长度单位、百分数值甚至负值。例如，margin: 25px;会将所有边距设置为25像素。margin: 25%;会将所有边距设置为父元素宽度的25%。而margin: -25px;会将所有边距设置为-25像素，这可能会导致元素重叠显示其他元素。

除了单独设置每个边距，还可以一次改变所有的属性。例如，margin: 10px 20px 30px 40px;会将上边距设置为10像素，右边距设置为20像素，下边距设置为30像素，左边距设置为40像素。

示例

1，文本的上边距设置使用厘米值

在CSS中，文本的上边距通常使用厘米（cm）作为单位进行设置。以下是一个例子：

p {
    margin-top: 1cm;
}

在这个例子中，段落（p）的上边距被设置为1厘米。你可以根据需要调整这个值。

2，Set 使用百分比值设置文本的下边距

在CSS中，可以使用百分比值来设置元素的下边距。以下是一个例子：

p {
    margin-bottom: 10%;
}

在这个例子中，段落（p）的下边距被设置为元素宽度的10%。你可以根据需要调整这个值。

CSS 边距属性

属性	描述
margin-top	设置元素上边缘的边距
margin-right	设置元素右边缘的边距
margin-bottom	设置元素下边缘的边距
margin-left	设置元素左边缘的边距
margin	同时设置上下左右四个方向的边距