边距 - CSS

边距是网页布局中的重要概念，它可以从页面的边缘向内扩展空间。在 CSS 中，我们可以使用 margin 属性来定义元素的边距。

语法

margin 属性的语法如下：

/* 设置所有方向的边距 */
margin: 10px;

/* 设置垂直方向和水平方向的边距 */
margin: 10px 20px;

/* 设置四个方向的边距 */
margin: 10px 20px 30px 40px;

/* 分别设置四个方向的边距 */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

以上语法中，10px、20px、30px、40px 都是用来定义边距值的，它们可以是像素、百分比、em 等单位。如果只有一个值，那么这个值会应用到所有方向的边距上；如果有两个值，第一个值会应用到垂直方向上，第二个值会应用到水平方向上；如果有四个值，它们分别对应上、右、下、左四个方向。

实例

可以看下面这个例子，它演示了如何设置不同方向的边距：

/* 给 #box 元素设置边距 */
#box {
  margin-top: 20px;
  margin-right: 40px;
  margin-bottom: 60px;
  margin-left: 80px;
}

在上面的例子中，#box 元素的上边距为 20px，右边距为 40px，下边距为 60px，左边距为 80px。

注意事项

• 如果给一个元素设置了边距，那么这个元素的大小会被增大，因为边距中的空间会被添加到元素的内容之外。

• 当两个或多个元素的边距重叠时，它们之间只会留下最大的那个边距。这个规则称为“边距合并”。

• 如果在一个浮动元素后面插入一个没有浮动的元素，并给这个元素设置了上边距，那么这个上边距会被浮动元素覆盖，从而导致这个没有浮动的元素与浮动元素之间没有空隙。这个现象称为“外边距重叠”。

总结

边距是控制页面排版和布局的重要因素，它可以让我们在页面元素之间留出空隙，使得整个页面显得更加美观、易读和易用。在编写 CSS 网页的时候，我们应该善于利用边距这个属性，使得我们的网页既具有个性又易于排版。