CSS基础：margin属性4种值类型，4个写法规则详解

CSS的margin属性是一个简写属性，用于设置一个元素的所有外边距。margin属性可以接受1到4个值：

1. 当只有一个值时：margin: 20px; 所有四个外边距都会设置为20px。
2. 当有两个值时：margin: 10px 20px; 上下外边距设置为10px，左右外边距设置为20px。
3. 当有三个值时：margin: 10px 20px 30px; 上外边距设置为10px，左右外边距设置为20px，下外边距设置为30px。
4. 当有四个值时：margin: 10px 20px 30px 40px; 上外边距设置为10px，右外边距设置为20px，下外边距设置为30px，左外边距设置为40px。

CSS代码示例：

/* 所有外边距都是20px */
.element-1 {
  margin: 20px;
}
 
/* 上下外边距是10px，左右外边距是20px */
.element-2 {
  margin: 10px 20px;
}
 
/* 上外边距是10px，左右外边距是20px，下外边距是30px */
.element-3 {
  margin: 10px 20px 30px;
}
 
/* 上外边距是10px，右外边距是20px，下外边距是30px，左外边距是40px */
.element-4 {
  margin: 10px 20px 30px 40px;
}

以上代码分别展示了如何为元素设置不同数量的外边距值。在实际应用中，可以根据需要选择适当的规则来设置元素的外边距。