CSS margin(外边距)

CSS margin(外边距)

概述

CSS（层叠样式表）中的margin属性用于控制元素的外边距，即元素与其它元素之间的空间。外边距是CSS盒模型的一部分，对网页布局有着重要的影响。本文将详细介绍CSS中margin属性的用法、注意事项以及与其它CSS属性的关系。

margin属性的基本用法

margin属性可以设置四个方向的值，分别为上（top）、右（right）、下（bottom）、左（left）。这些值可以是具体的像素值、百分比、em、rem等。

margin: 10px 20px 30px 40px; /* 上、右、下、左 */

上述代码中，margin属性分别设置了上外边距为10px、右外边距为20px、下外边距为30px、左外边距为40px。

margin的值类型

1. 像素值（px）：像素值是最常见的单位，表示具体的像素大小。
2. 百分比（%）：百分比相对于父元素的宽度和高度计算，通常用于响应式设计。
3. em和rem：em相对于当前元素的字体大小，rem相对于根元素（html）的字体大小。
4. auto：自动计算外边距值，通常用于实现等高布局。

margin的合并规则

当元素有多个相邻的margin属性时，会发生合并。以下是几种常见的合并规则：

1. 垂直方向的合并：相邻的垂直margin会合并成一个margin，合并后的值等于两个margin中的较大值。
2. 水平方向