CSS Margin
CSS Margin （CSS外边距）
The CSS margin property is used for creating space around the element. CSS provides different properties, with the help of which you can set the margin for an element’s each side (right, left, top and bottom). （CSS margin属性用于在元素周围创建空间。CSS提供不同的属性，借助这些属性，您可以为元素的每一侧（右侧、左侧、顶部和底部）设置边距。）
The individual sides
The individual sides （单边）
With the help of the following properties you can set the margin for each side of an element:
margin-top （上部边距）
margin-bottom （下边距（外））
margin-left （边距 - 左侧）
margin-right （边距 - 右侧）
It’s already obvious, that for the top, we use margin-top, for bottom margin-bottom, for left side margin-left and right margin-right. （很明显，对于顶部，我们使用margin-top ，对于底部margin-bottom ，对于左侧margin-left和右侧margin-right。）
All the margin properties can have the values below:
auto - the margin is calculated by the browser, （-自动-边距由浏览器计算，）
length, which is used for specifying a margin in px, pt, cm, etc, （-长度，用于指定px、pt、cm等单位的边距，）
%, which specifies a margin in % of the width of the containing element, （- % ，以包含元素宽度的%指定边距，）
inherit , which specifies that the margin must be inherited from its parent element. （- inherit ，指定边距必须从其父元素继承。）
The margin property accepts negative values. （Margin属性接受负值。）
Margin as a shorthand property
Margin as a shorthand property （保证金作为速记属性）
The CSS margin property is a shorthand property for the individual margin properties below:
margin-top （上部边距）
margin-bottom （下边距（外））
margin-left （边距 - 左侧）
margin-right （边距 - 右侧）
When the margin property has four different values, it looks like this in code:
p {
margin-top: 25px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
}
If all sides have the same values, for example, all sides are 50px, in CSS we can write it like this. （如果所有边都有相同的值，例如，所有边都是50px ，在CSS中我们可以这样写。）
p {
margin: 50px;
}
When we have the same values for the top and the bottom sides (for example 15px) and the same for the left and the right sides (for instance 10px), then we can the follow code. （当顶部和底部的值相同（例如15px ） ，左侧和右侧的值相同（例如10px ）时，我们可以执行以下代码。）
p {
margin: 15px 10px;
}
This is the same as this one. （这个和这个一样。）
p {
margin-top: 15px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;
}
When the values for the left and the right sides are the same, for example, 15px, the top side is a 5px, and the bottom side is 10px, we will write the following code. （当左侧和右侧的值相同时，例如15px ，顶侧是5px ，底侧是10px ，我们将编写以下代码。）
p {
margin: 5px 15px 10px;
}
This is the same as this one. （这个和这个一样。）
p {
margin-top: 5px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;
}
Example of the margin property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: white;
margin: 25px 10px 15px 20px;
}
</style>
</head>
<body>
<p>Paragraph with background-color, color and margin properties.</p>
</body>
</html>
Result
The auto value of the margin property
The auto value of the margin property （Margin属性的auto值）
Setting the “auto” value of the margin property you can horizontally center the element inside its container. As a result, the element will take up the defined width and the space that remains will be divided between the right and left margins. （设置margin属性的“auto”值，可以使元素在其容器内水平居中。因此，元素将占用定义的宽度，剩余的空间将在右边距和左边距之间划分。）
Example of the margin property with the “auto” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
margin: auto;
background-color: red;
}
</style>
</head>
<body>
<h2>The auto value</h2>
<p>
Setting the “auto” value of the margin property you can horizontally center the element inside its container. As a result, the element will take up the defined width and the space that remains, will be divided between the right and left margins.
（设置margin属性的“auto”值，可以使元素在其容器内水平居中。因此，元素将占用定义的宽度，剩余的空间将在右边距和左边距之间划分。）
</p>
<div>
The auto value horizontally centered this div.
（自动值水平居中此div。）
</div>
</body>
</html>
The inherit value of the margin property
The inherit value of the margin property （Margin属性的继承值）
In the example below, the left margin of the <p> element is inherited from its parent element (<div>):
Example of the margin property with the “inherit” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: lightblue;
margin-left: 100px;
}
p.inherit {
margin-left: inherit;
padding: 10px 0;
}
</style>
</head>
<body>
<h2>The inherit value</h2>
<p>
Here the left margin is inherited from its parent element:
</p>
<div>
<p class="inherit">
With the help of the "inherit" value, the left margin is inherited from the div element.
（借助“inherit”值，从div元素继承左边距。）
</p>
</div>
</body>
</html>