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:
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:
To shorten the code, it is possible to specify all the margin properties in one property.
margin property is a shorthand property for the following individual margin properties:
So, here is how it works:
margin property has four values:
Use the margin shorthand property with four values:
margin property has three values:
Use the margin shorthand property with three values:
margin property has two values:
Use the margin shorthand property with two values:
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.