Css 简明教程
CSS - Margins
CSS 边距用于在元素外侧周围创建空间。在本教程中，我们将学习如何向 HTML 元素添加不同类型的边距以及与其关联的属性。
CSS Margins are used to create space around outer part of an element. In this tutorial we will learn how to add different types of margins to HTML elements and properties associated with it.
What is CSS Margin?
-
A Margin in CSS make layout visually appealing by adding extra space between elements.
-
You can set margin for individual sides using properties margin-bottom, margin-top, margin-left and margin-right
-
*Negative Margin: * A margin with negative value indicate the elements overlap with each other.
CSS Margins Example
您可以在以下部分尝试使用不同方法来创建边距，您还可以更改这些值。
You can try different ways to use to create margins in the below section and you can change the values as well.
Define Margin
要在任何 HTML 元素上定义任何边距，您可以使用 * CSS margin property* ，此属性是 'margin-top', 'margin-right', 'margin-bottom' 和 'margin-left' 属性的简写属性。一个值将在元素周围生成边距。
To define any margin on any HTML element you can use CSS margin property, this property is shorthand property of 'margin-top', 'margin-right', 'margin-bottom' and 'margin-left' properties. A single value will generate margin all around the element.
Example
如您在以下示例中看到的，我们已在 * paragraph* 元素周围创建了一个 10px 和 20px 的边距，并用浅绿色背景突出显示边距区域。
As you can see in this below example we have made a 10px and 20px margin surrounding the paragraph element and highlight the margin area with light-green background.
<!DOCTYPE html>
<html>
<head>
<title>CSS Margin</title>
<style>
div{
background-color: lightgray;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Tutorialspoint</h1>
<h3>CSS Margin</h3>
<div>
<div style="margin: 20px; background: white;">
CSS Margin 20px all sides
</div>
<hr color="blue">
<div style="margin: 10px; background: white;">
CSS Margin 10px all sides
</div>
</div>
</body>
</html>Margin Individual Sides
正如我们前面提到的，边距是所有各个边距的简写属性。您可以为顶部、右侧、底部和左侧设置不同的边距值。
As we have mentioned earlier the margin is shorthand property for all Individual sides margin. You can set different margin values for top, right, bottom and left sides.
-
margin-top: This property is used to set the margin top on any element.
-
margin-right: This property is used to set the margin right on any element.
-
margin-bottom: This property is used to set the margin bottom on any element.
-
margin-left: This property is used to set the margin left on any element.
您可以查看附带图像以更清楚地了解各个侧边距。
You can check the attached image for more clarity on individual side margins.
Example
在此示例中，我们生成了 4 个不同的元素，并针对每个元素的各个侧面生成了页边距，所用的属性如上所述。
In this example we have create 4 different element and generated margin on each element’s individual sides with the above mentioned properties.
<!DOCTYPE html>
<html>
<head>
<title>CSS Margin</title>
<style>
div{
background-color: lightgray;
border: 1px solid black;
}
p {
background-color: lightgreen;
border: 1px solid black;
}
span {
background-color: white;
}
</style>
</head>
<body>
<h1>Tutoriaslpoint</h1>
<h3>CSS Margin</h3>
<div>
<p style="margin-top: 15px;">
<span>CSS Margin Top Applied on Paragraph Element</span>
</p>
<hr>
<p style="margin-right: 15px;">
<span>CSS Margin Right Applied on Paragraph Element</span>
</p>
<hr>
<p style="margin-bottom: 15px;">
<span>CSS Margin Bottom Applied on Paragraph Element</span>
</p>
<hr>
<p style="margin-left: 15px;">
<span>CSS Margin Left Applied on Paragraph Element</span>
</p>
</div>
</body>
</html>Different Ways to Apply Margin on HTML Elements
有四种方法可以向 CSS margin 属性提供值，所有这些方法都在下面使用完整的示例代码进行了提及和说明。
There are four ways to provide value to the CSS margin property all of them are mentioned and described bellow with the complete example code.
-
Single Values: Here you can provide a single value to the margin property that same value will be applicable on four sides of the the element.
-
Two Values: Here you have to provide two values that will be used as top, bottom and right, left margin value.
-
Three Values: In this way you can provide three values that will define top, left, right and bottom value. Like if you set margin: 20px 40px 10px. In this case top margin will be 20px, right and left margins will be 40px and bottom margin will be 10px.
-
Four Values: If you provide four values to the margin property it will generate top margin from first value, right margin from 2nd value and so on.
Syntax
margin: "value" // Single Value
margin: "value value" // Two Values
margin: "value value value" // Three Values
margin: "value value value value" // Four ValuesExample
在以下示例中，我们生成了四个不同的元素，并使用了内联 css 来以不同的方式在元素周围生成空白。
In this following example we have crated a four different element and used inline css to generate margin around the element in different ways.
<!DOCTYPE html>
<html>
<head>
<title>CSS Margin</title>
<style>
div{
background-color: lightgray;
border: 1px solid black;
}
p {
background-color: lightgreen;
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h1>Tutoriaslpoint</h1>
<h3>CSS Margin</h3>
<div>
<p style="margin: 20px">
<span>Margin property with Single Value</span>
</p>
<hr/>
<p style="margin: 10px 20px">
<span>Margin property with two Values</span>
</p>
<hr/>
<p style="margin: 10px 15px 20px">
<span>Margin property with three Values</span>
</p>
<hr/>
<p style="margin: 5px 10px 15px 20px">
<span>Margin property with four Values</span>
</p>
</div>
</body>
</html>Margin Mix up Units
在缩写属性中指定边距值时，CSS 不会限制使用多个单位。这意味着可以传递像素形式的长度值以及 ems 或英寸等。
CSS does not restrict usage of multiple units for specifying the values of margin, while specifying in shorthand property. That means one can pass values of length as pixel along with ems or inches, etc.
Example
在以下示例中，我们将提供边距属性上的 4 个值，但每个值将以不同的单位表示。
In this following example we will provide 4 values on margin property but each value will be mentioned in different units..
<!DOCTYPE html>
<html>
<head>
<style>
div{
border: 2px solid;
}
h2 {
margin: 20px 4ex .5in 3em;
background-color: silver;
}
</style>
</head>
<body>
<div>
<h2>
The different length units are passed
as margin values to the h2 element.
</h2>
</div>
</body>
</html>Margin Percentage Values
边距属性可以传递百分比值，因为 CSS 允许这样做。百分比是相对于父元素内容区域的宽度计算的。
Margin property can have a percentage value passed, as CSS allows it. Percentages are calculated in relation to the width of the parent element’s content area.
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
border: 2px solid;
}
p {
margin: 10%;
background-color: silver;
}
</style>
</head>
<body>
<div>
<p>
The margin defined for p element is
10%which is calculated as 10% of width
of parent element(div), which means
it is 10% of 300px and that is 30px.
</p>
</div>
</body>
</html>Margin Auto and Inherit Value
属性值 margin: auto 用于水平居中元素。
The property value margin: auto is used to center an element horizontally.
属性值 margin: inherit 用于继承与父元素相同的边距。
The property value margin: inherit is used to inherit same margin as parent element.
Example
在这个示例中，我们将讨论 margin 的自动值和继承值。
In this example we will discuss auto and inherit value for margin
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
margin: auto;
background-color: lightgray;
}
p {
margin-left: 20px;
border: 2px solid black;
padding: 10px
}
span{
background-color: silver;
border: 2px solid black;
margin-left: inherit;
}
</style>
</head>
<body>
<h2>Margin Auto</h2>
<div>
A div element centered using margin: auto;
</div>
<h2>Margin Inherit</h2>
<p>
Some texts..<span>The span tag uses
same margin as parent paragraph</span>
</p>
</body>
</html>