边距

在编写页面布局时，边距（Margin）是一个非常重要的概念。它定义了元素与其周围空间之间的距离。

边距的类型

边距有以下几种类型：

1. 外边距（margin）：元素与元素之间的距离，可以通过设置 margin-top、margin-right、margin-bottom、margin-left 来控制。
2. 内边距（padding）：元素内容与元素边框之间的距离，可以通过设置 padding-top、padding-right、padding-bottom、padding-left 来控制。

边距的使用

外边距

外边距可以使用以下方式进行设置：

1. 设置单个外边距：margin: 10px;（四个方向均为10px）
2. 设置上下左右的外边距：margin: 10px 20px;（上下为10px，左右为20px）
3. 设置每个方向的外边距：margin: 10px 20px 30px 40px;（上为10px，右为20px，下为30px，左为40px）

内边距

内边距语法与外边距类似。可以使用以下方式进行设置：

1. 设置单个内边距：padding: 10px;（四个方向均为10px）
2. 设置上下左右的内边距：padding: 10px 20px;（上下为10px，左右为20px）
3. 设置每个方向的内边距：padding: 10px 20px 30px 40px;（上为10px，右为20px，下为30px，左为40px）

注意事项

1. 边距可以使用百分比，以相对于父元素的宽度计算。
2. 如果两个元素之间同时有外边距和内边距，它们的真实间距将是这两个边距值的总和。
3. 在某些情况下，元素的外边距会发生折叠。具体情况可以参考 MDN文档。

以上就是边距的介绍。在页面布局中，合理的边距设置能够使得页面看起来更加美观和整洁。