Margin is the spacing outside an element.
The margin property specifies the size of the margin.
This includes margin for all 4 sides: top, right, bottom, and left.
An <input> element with a 50-pixel margin around the element.
<input type="text"
placeholder="Your name"
style="margin:50px;" />
Margin adds space outside the element's border.
The value can be any length value, such as, px, pt, cm, or percentage.
The margin
property sets the margin for all 4 sides of the element.
It is a shorthand for these properties:
margin-top
margin-right
margin-bottom
margin-left
For details on margin, see our CSS margin Property Reference.
The following examples show margin
accepting 4, 3, 2, and 1 values.
An element with 4 margin
values for top, right, bottom, and left sides.
<div style="margin: 20px 40px 60px 80px;
border: 5px solid lightblue;
background: aliceblue;
padding: 15px;">
An element with margin: 20px 40px 60px 80px;
</div>
An element with 3 margin
values for top, right, bottom, and left the same as right.
<div style="margin: 20px 40px 60px;
border: 5px solid lightblue;
background: aliceblue;
padding: 15px;">
An element with margin: 20px 40px 60px;
</div>
An element with 2 margin
values for top and bottom, and right and left.
<div style="margin: 20px 40px;
border: 5px solid lightblue;
background: aliceblue;
padding: 15px;">
An element with margin: 20px 40px;
</div>
An element with 1 margin
value for all sides.
<div style="margin: 20px;
border: 5px solid lightblue;
background: aliceblue;
padding: 15px;">
An element with margin: 20px;
</div>
The margin
can also be set to the auto
keyword.
In that case, the browser will allocate the remaining spaces on the sides equally.
With left and right margin set to auto
, the element will be centered.
A centered element with left and right margin
set to auto
.
<div style="margin: 20px auto;
width: 250px;
border: 5px solid lightblue;
background: aliceblue;
padding: 15px;">
A centered element with margin: 20px auto
</div>
A negative margin value moves the element beyond its container.
In this example, the element's left side is clipped by the container.
<style>
.margin {
max-width: 600px;
border: 4px solid firebrick;
text-align: center;
padding: 25px;
margin-left: -120px;
}
</style>
<div class="margin">
This element has a -120px left margin.
</div>
Margin values can also be set for each side with these properties:
They accept any valid length value, such as, px, em, cm, and %.
An element with 4 margin properties, one for each side.
<div style="margin-top: 20px;
margin-right: 40px;
margin-bottom: 60px;
margin-left: 80px;
border: 5px solid lightblue;
background: aliceblue;
padding: 15px;">
An element 4 individual margin properties.
</div>
Property | Description |
---|---|
margin | A shorthand property for setting the margin properties in one declaration |
margin-bottom | Sets the bottom margin of an element |
margin-left | Sets the left margin of an element |
margin-right | Sets the right margin of an element |
margin-top | Sets the top margin of an element |