Author: MDBootstrap
CSS Margins
The CSS margin
properties are used to create space around elements,
outside of any defined borders.
With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).
.margin-example {
margin: 60px;
}
<p class="margin-example">
This element has a margin of 60px on each side
</p>
Live preview
This element has a margin of 60px on each side
Margin - Individual Sides
CSS has properties for specifying the margin for each side of an element:
margin-top
margin-right
margin-bottom
margin-left
The following example sets different margins for all four sides of a <p> element:
.margin-example-2 {
margin-top: 20px;
margin-bottom: 100px;
margin-right: 50px;
margin-left: 80px;
}
<p class="margin-example-2">
This element has a different margin on each side
</p>
Live preview
This element has a different margin on each side
Margin - Shorthand Property
To shorten the code, it is possible to specify all the margin properties in one property.
So, here is how it works:
If the margin
property has four values:
- margin: 25px 50px 75px 100px;
- top margin is 25px
- right margin is 50px
- bottom margin is 75px
- left margin is 100px
p {
margin: 25px 50px 75px 100px;
}
Previous lesson Next lesson
Spread the word: