CSS重要属性之 margin 属性知识大整合

在 CSS 中，margin 指的是页面元素的外边距，即一个元素与其周围元素之间的距离。

margin 属性的语法如下：

margin: top right bottom left;

其中，四个值分别表示上、右、下、左方向的外边距大小，也可以使用以下缩写：

margin: x; /* 四边都使用 x 作为外边距 */margin: x y; /* 上下使用 x，左右使用 y */margin: x y z; /* 上使用 x，左右使用 y，下使用 z */margin: x y z w; /* 分别表示上、右、下、左方向的外边距大小 */

margin 的单位可以是 px、em、rem、% 等单位。

margin 的取值范围可以是一个非负的数字，也可以是一个负数。如果是一个非负的数字，则表示相应方向的外边距大小；如果是一个负数，则将元素向相应方向移动。

当 margin 的属性值为 auto 时，元素的外边距将自动计算，以保证元素在水平居中对齐。

当 margin 的属性值为 inherit 时，元素将从其父元素继承 margin 属性的值。

当两个相邻的元素的 margin 值相遇时，它们之间的 margin 将会重叠。例如，当两个相邻的元素的 margin-top 和 margin-bottom 值相等时，它们之间的 margin 会重叠。

当 margin 的属性值为百分数时，并不是相对于元素本身的宽度或高度来计算的，而是相对于其包含块的宽度来计算的。

例如，在以下示例中，#box 的 margin-top 的属性值为 10%，并不是相对于 #box 元素本身的高度来计算的，而是相对于其包含块 body 元素的宽度来计算的。

<body>  <p id="box"></p></body>

#box {  margin-top: 10%;}

<p class="parent">  <p class="child"></p></p>

.parent {  margin-top: 50px;}.child {  height: 100px;  background-color: red;}

在以上示例中，设置了父元素 .parent 的 margin-top 属性值为 50px，因此子元素 .child 距离父元素 .parent 的上方会有 50px 的距离。

<p style="background-color: blue; height: 50px; margin-bottom: 20px;"></p><p style="background-color: red; height: 50px; margin-top: 30px;"></p>

在以上示例中，第一个 p 元素的 margin-bottom 的属性值为 20px，第二个 p 元素的 margin-top 的属性值为 30px，它们之间的 margin 将会重叠，因此两个 p 元素之间的距离只有 30px，而不是 50px。

通过本文的介绍，相信你已经对 margin 属性有了更深入的了解。在应用 margin 属性时，我们应该根据页面布局的需要，灵活使用相关的属性值以及单位，从而实现对页面元素的精确定位。