CSS 重要属性之 margin 属性知识大整合(必看篇)

什么是 margin?

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

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 的单位

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

margin 的取值范围

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

margin 的常见属性值

auto

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

inherit

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

margin 的几个注意点

margin 重叠

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

margin 的百分比值

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

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

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

#box {
  margin-top: 10%;
}

margin 的实例

实例 1：设置父元素的 margin 值，间接影响子元素的位置

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

.parent {
  margin-top: 50px;
}

.child {
  height: 100px;
  background-color: red;
}

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

实例 2：Margin 重叠

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

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

结语

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

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS重要属性之 margin 属性知识大整合(必看篇) - Python技术站

CSS重要属性之 margin 属性知识大整合(必看篇)