CSS margin属性详解

CSS margin属性是用来设置元素外边距的，它可以影响元素与元素之间的距离，也可以影响元素与父元素或者文档边界的距离。在前端开发中，掌握margin属性的使用方法，可以让我们在布局设计方面更加灵活。

一、margin属性的基础用法

margin属性有4个值，分别表示上、右、下、左四个方向的外边距。比如设置一个元素的上边距为10px，右边距为20px，下边距为30px，左边距为40px。可以这样写：

selector {
  margin: 10px 20px 30px 40px;
}

如果我们只想设置左右两个方向的外边距，可以这样写：

selector {
  margin: 0 20px;
}

表示上下方向的外边距为0，左右方向的外边距为20px。如果我们只想设置一个方向的外边距，可以这样写：

selector {
  margin-left: 20px;
}

此时该元素左边距为20px，其他方向的外边距为0。

二、margin属性与盒模型

在CSS中，每个元素都具有盒模型。盒模型由四个部分构成，分别是：内容区域、填充区域、边框区域、外边距区域。其中外边距区域影响着元素与其他元素之间的距离。举个例子，下面的代码中有两个div元素，它们之间的间距由margin属性控制：

<div class="first"></div>
<div class="second"></div>

.first {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-bottom: 20px;
}

.second {
  width: 100px;
  height: 100px;
  background-color: blue;
}

上述代码中，first元素的下外边距为20px，我们看到first元素与second元素之间的距离正好是20px。同时，first元素的内容区域、填充区域、边框区域加起来的总宽度为100px，而整个first元素所占据的宽度包含了外边距区域，即宽度为140px。由此可见，margin属性影响着元素的总宽度和高度。

三、margin合并

如果一个元素的上外边距和下外边距相遇，它们会发生“margin合并”的现象。比如下面的代码中，由于两个元素的外边距相遇，它们之间的间距并不是40px，而是20px：

<div class="one"></div>
<div class="two"></div>

.one {
  margin-bottom: 20px;
}

.two {
  margin-top: 20px;
}

在CSS标准中，规定margin合并的情况有以下三种：

1、相邻兄弟元素间的margin合并

如果两个兄弟元素相遇，它们之间的间距等于它们之间的最大外边距值。

2、父元素与第一个子元素，或者最后一个子元素之间的margin合并

如果一个元素的上外边距和它的第一个子元素的上外边距相遇，或者一个元素的下外边距和它的最后一个子元素的下外边距相遇，它们会发生合并，合并后的外边距等于它们之间的最大外边距值。

3、空元素间的margin合并

一个不包含任何内容的空元素，它的上下外边距会发生合并，最终的外边距等于它们之间的最大值。

四、负margin

margin属性还可以取负值，常用于清除浮动和制作特殊效果。比如，我们可以使用负margin去除父元素高度坍塌问题：

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

.parent {
  overflow: hidden;
}

.child {
  float: left;
  width: 50%;
  height: 200px;
  margin-bottom: -1000px;
  padding-bottom: 1000px;
}

上述代码通过给child元素设置负的外边距，同时给父元素设置溢出隐藏，来解决父元素高度坍塌的问题。

负margin还可以制作出很多特殊效果，比如实现两列布局的等高布局。我们可以通过设置相邻两个元素上下外边距相等来实现：

<div class="left"></div>
<div class="right"></div>

.left {
  float: left;
  width: 70%;
  margin-right: -30%;
  height: 200px;
  background-color: red;
}

.right {
  float: left;
  width: 30%;
  margin-left: -70%;
  height: 300px;
  background-color: blue;
}

上述代码中，设置了左边的元素宽度为70%，右边的元素宽度为30%，并分别设置相应的负margin值，实现了等高布局的效果。

五、总结

margin属性是CSS中最常用的属性之一，它不仅可以影响元素与元素之间的距离，也可以影响元素与文档边界的距离。在使用margin属性时，需要注意margin合并的情况，同时也可以运用负margin来解决一些特殊问题和制作特殊效果。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/304102.html