margin
CSS margin Property
The CSS margin property is used to create space around the element.
The margin property is a shorthand for the following properties:
margin-top
margin-bottom
margin-left
margin-right
We can use the margin property for all sides (top, bottom, left, right) at once. For the top side we use margin-top, for bottom margin-bottom, for left side margin-left and for right side margin-right.
The margin property can be defined with one, two, three, or four values:
margin : 25px 10px 15px 20px. This code means that the margin in the top side must be 25px, in the right side margin 10px, in the bottom side 15px and the left side is 20px.
margin: 15px 10px 20px. This means that the margin in the top side must be 15px, in the right and left sides 10px, and in the bottom side 20px.
margin: 15px 10px. This code means that top and bottoms margins are 15px, right and left margins are 10px.
If the margin has only one value it is applied to all four values.
Negative values are valid.
The top and bottom margins have no effect on inline elements, such as <span> or <code>.
| 类目 | 类目 |
|---|---|
| Initial Value | 0 |
| Applies to | All elements. |
| Inherited | No. |
| Animatable | Yes. Outline is animatable. |
| Version | CSS1 |
| DOM Syntax | Object.style.margin = “20px 10px”; |
Syntax
Syntax
margin: length | auto | initial | inherit;
Example of the margin property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
margin: 25px 10px 15px 20px;
}
</style>
</head>
<body>
<h2>Margin property example</h2>
<p>Paragraph with background-color, color and margin properties.</p>
</body>
</html>
Result
Example of the margin property, where the margin of an element is set to 10% for all sides:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.example {
margin: 10%;
}
</style>
</head>
<body>
<h2>Margin property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>
Example of the margin property defined as “em”:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.example {
margin: 4em;
}
</style>
</head>
<body>
<h2>Margin property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>
Let’s take a look at the following example which shows the difference between margin, padding and border properties:
Example of the margin property with the padding and border properties:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #eee;
width: 200px;
border: 20px solid #8ebf42;
padding: 30px;
margin: 55px;
}
</style>
</head>
<body>
<h2>Margin property example</h2>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</body>
</html>
Values
Values
| Value | Description | Play it |
|---|---|---|
| auto | Sets the margin. It is the default value of this property. | Play it » |
| length | Defines a margin in px, pt, cm, etc. Default value is 0. | Play it » |
| % | Sets the margin in % of containing element. | Play it » |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parents element. |