CSS margin Property
The margin CSS property is a shorthand for setting the margin-bottom, margin-top, margin-left, margin-right CSS properties. See property values and examples.
The CSS margin property creates space outside an element's border — the gap between that element and its neighbours. Unlike padding, which adds space inside the border, margin pushes other content away from the element.
This page covers the shorthand syntax, how the one-to-four value pattern works, centering with auto, negative margins, and the margin-collapsing rule that surprises most beginners.
What margin is a shorthand for
The margin property is a shorthand that sets all four individual side properties in one declaration:
The one-to-four value pattern
Because margin is shorthand, the number of values you give it decides which sides they apply to. The values always run clockwise starting from the top (top → right → bottom → left):
- Four values —
margin: 25px 10px 15px 20px;sets top25px, right10px, bottom15px, left20px. - Three values —
margin: 15px 10px 20px;sets top15px, right and left10px, bottom20px. - Two values —
margin: 15px 10px;sets top and bottom15px, right and left10px. - One value —
margin: 15px;applies15pxto all four sides.
A handy memory aid for the four-value form is the word TRouBLe (Top, Right, Bottom, Left).
Negative values are valid.
| Initial Value | 0 |
|---|---|
| Applies to | All elements. |
| Inherited | No. |
| Animatable | Yes. Margin is animatable. |
| Version | CSS1 |
| DOM Syntax | Object.style.margin = "20px 10px"; |
Syntax
Syntax of CSS margin Property
margin: length | auto | initial | inherit;Example of the margin property:
Example of CSS margin Property with four values
<!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:
Example of CSS margin Property with % (percentage) value
<!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":
Example of CSS margin Property with em value
<!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:
Example of CSS margin Property with one (px) value
<!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>Centering a block with margin: auto
Setting the left and right margins to auto is the classic way to horizontally center a block-level element that has an explicit width. The browser splits the leftover horizontal space equally between the two sides:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 300px;
margin: 0 auto;
background-color: #1c87c9;
color: #fff;
padding: 20px;
}
</style>
</head>
<body>
<div class="box">I am centered horizontally.</div>
</body>
</html>margin: 0 auto; means top and bottom margins of 0 and auto on the left and right. Note that auto only centers horizontally — it does not center vertically. For vertical centering, reach for Flexbox or Grid.
Negative margins
Margins accept negative values, which pull an element toward its neighbour (or outward past its container) instead of away from it. This is useful for overlapping elements or nudging an item beyond its parent's padding:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.second {
margin-top: -20px;
background-color: #8ebf42;
color: #fff;
padding: 10px;
}
</style>
</head>
<body>
<p>First paragraph.</p>
<p class="second">This paragraph is pulled up to overlap the one above.</p>
</body>
</html>Margin collapsing
When the top and bottom margins of two block elements meet vertically, they don't add together — instead they collapse into a single margin equal to the larger of the two. So a paragraph with margin-bottom: 30px; followed by one with margin-top: 20px; produces a 30px gap between them, not 50px.
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. |