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).
CSS has properties for specifying the margin for each side of an element:
margin-top
margin-right
margin-bottom
margin-left
All the margin properties can have the following values:
Tip: Negative values are allowed.
Set different margins for all four sides of a <p> element:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
To shorten the code, it is possible to specify all the margin properties in one property.
The margin
property is a shorthand property for the following individual margin properties:
margin-top
margin-right
margin-bottom
margin-left
So, here is how it works:
If the margin
property has four values:
Use the margin shorthand property with four values:
If the margin
property has three values:
Use the margin shorthand property with three values:
If the margin
property has two values:
Use the margin shorthand property with two values:
If the margin
property has one value:
Use the margin shorthand property with one value:
You can set the margin property to auto
to horizontally center the element within its container.
The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.
Use margin: auto:
This example lets the left margin of the <p class="ex1"> element be inherited from the parent element (<div>):
Required fields are marked *
Get all latest content delivered to your email free.