哪个属性指定标记框和主框最近边框边缘之间的距离？-猿码集

1. 简介

CSS是层叠样式表（Cascading Style Sheets）的缩写，它给网页设计者提供了一种在页面排版布局时更为自由和灵活的方式。CSS能够控制文本的颜色、字体、背景色以及其他元素的样式，比如边距和定位等。本文重点介绍的是CSS中一个很重要的属性，用来指定标记框和主框最近边框边缘之间的距离。

在深入了解这个属性之前，我们需要先了解一下CSS盒子模型。盒子模型是指在CSS中每个元素被看作是一个盒子，有内容区域（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。


.box {
  width:100px;
  height:100px;
  border:1px solid black;
  margin:10px;
  padding:20px;
}

上面的代码定义了一个宽高分别为100px的盒子，其中边框的厚度是1px，内边距为20px，外边距也为10px。我们可以通过浏览器的Elements选项来看到每个元素的盒模型：

很容易看出这个盒子为一个正方形，边框、内边距和外边距在其外围形成了一圈。（注意，我们使用了box-sizing属性的默认值：content-box。关于box-sizing属性的不同取值，这里不做过多介绍，感兴趣的读者可以自行查阅文档。下文的代码均采用content-box。）

我们已经知道，盒子模型中有外边距和内边距这两个概念。在CSS中，margin和padding属性用来控制盒子模型的外边框和内边框之间的距离。

margin属性用来控制盒子与其他元素的距离，可以取值为像素（px）、百分比（%）或em单位（em是相对于元素的字体大小而言的）。它的取值可以针对上下左右四个方向单独设定：


.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

上面的代码为一个盒子分别设置了上下左右四个方向的外边距，其中上下间距为10px，左右间距为20px。

padding属性则用来控制盒子内部元素与盒子内边框之间的距离，也可以取值为像素、百分比或em单位。同样，它也可以分别对四个方向设置：


.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

上述代码为盒子设置了上下左右四个方向的内边距，其中上下间距为10px，左右间距为20px。

border属性用来为盒子设置边框。这个属性比较特殊，需要设置其宽度（thickness）、风格（style）和颜色（color）三个值：


.box {
  border: 2px dashed red;
}

上面的代码为盒子定义了一个2px宽、虚线边框，边框颜色为红色。

细心的读者可能已经发现，实际上margin和padding属性的定义是相对于盒子内部的边框而言。也就是说，如果我们给一个没有边框（或边框宽度为0）的盒子设置padding或margin，那么其效果是完全看不出来的。

那么这时候我们可能会有一个问题："如果外边框和内边框的厚度一样，均为1px，我给盒子设置的外边距是10px，内边距是20px，那么盒子到底离周围元素的距离是多少呢？"

答案是，前面所说的属性——"用来指定标记框和主框最近边框边缘之间的距离"——就应运而生了。这个属性就是margin，它指定了盒子外边距边缘与周围元素之间的距离，也就是说，它定义了最终的距离。

我们已经知道，margin属性是用来控制盒子与其他元素之间的距离的。下面我们通过一个例子来看看margin属性的应用。


.box {
  width: 300px;
  height: 300px;
  margin: 50px;
  background-color: pink;
}

上述代码定义了一个宽高为300px的盒子，外边距为50px，背景色为粉色。我们在HTML中插入一个p标签来测试一下盒子与其周围元素的距离：


<p>Hello world!</p>
<div class="box"></div>
<p>Hello again!</p>

很显然，盒子与其上下的p标签之间距离为50px。

我们可以进一步尝试设置盒子的内边距和边框，看看margin属性对最终距离的影响：


.box {
  width: 300px;
  height: 300px;
  margin: 50px;
  padding: 30px;
  border: 2px solid black;
  background-color: pink;
}

我们再次在HTML中插入一个p标签：


<p>Hello world!</p>
<div class="box"></div>
<p>Hello again!</p>

这时候我们可以通过浏览器的Developer Tools——Elements来寻找盒子模型与周围元素的距离：

可以看出，盒子与周围元素之间的静态距离为50px，这是margin属性的作用。

CSS中的margin属性用来指定标记框和主框最近边框边缘之间的距离，是控制元素间距的很重要的属性之一，与padding和border一样，是CSS盒子模型中不可缺少的一部分。

在使用margin属性的时候，需要注意它与padding和border的关系，以及它所指定的最终距离。愿读者在日后的CSS编写中能够更好地运用此属性，写出更好的代码。