CSS margin 属性和CSS 单边外边距属性

CSS 的 margin 属性用于设置元素的外边距，它可以影响一个元素的边界框到其父元素或者兄弟元素之间的距离。margin 属性可以有一到四个值，表示元素的上、右、下、左外边距，顺时针方向。

CSS 的单边外边距属性可以单独设置元素的一侧外边距，它们是：

• margin-top：设置元素的上外边距。
• margin-right：设置元素的右外边距。
• margin-bottom：设置元素的下外边距。
• margin-left：设置元素的左外边距。

实例代码：

/* 设置四个方向的外边距 */
.box {
  margin: 10px 20px 30px 40px;
}
 
/* 设置单边外边距 */
.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}
 
/* 使用 margin 属性简写 */
.box {
  margin: 10px 20px; /* 上下、左右外边距分别为10px和20px */
}
 
/* 使用 margin 属性简写 */
.box {
  margin: 10px 20px 30px; /* 上外边距10px，左右外边距20px，下外边距30px */
}
 
/* 设置元素的所有四个外边距相同 */
.box {
  margin: 10px; /* 所有四个方向外边距都是10px */
}

在实际应用中，可以根据需要选择使用 margin 属性的简写形式或单独设置元素的某一侧外边距。