The CSS margin properties are used to create space around elements, outside of any defined borders. Negative values can be used to overlap content. With CSS, you have full control over the margins.
Top, bottom, left and right margin can be changed independently using separate properties. You can also change all properties at once by using shorthand margin property.
S. No. | Property | Descriptions |
1 | margin | This property is used to set all the properties in one declaration. |
2 | margin-top | Sets the top margin of an element |
3 | margin-right | Sets the right margin of an element. |
4 | margin-bottom | Sets the bottom margin of an element. |
5 | margin-left | Sets the left margin of an element. |
All of the margin properties can have the following values:
S. No. | Property | Descriptions |
1 | auto | This is used to allow a margin to be calculated by the browser. |
2 | length | It is used to specify a margin pt, px, cm, etc. its default value is 0px. |
3 | % | It is used to define a margin in percent of the width of containing element. |
4 | inherit | It specifies that the margin should be inherited from the parent element. |
Tips: You may also use negative values to overlap content.
Example:
Set different margins for all four sides of the <p> element:
Output:
To shorten the code, All the margin properties can be specified in one property.
There are four types to specify the margin property. You can use one of them.
So, this is how it works:
If there are four values for the margin property:
Example
Use four values of the margin shorthand property:
Output
The margin shorthand property - Four valuesThis div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.
|
If there are three values for the margin property:
Example
Use three values of the margin shorthand property:
Output
The margin shorthand property - Three valuesThis div element has a top margin of 25px, a right and left margin of 50px, and a bottom margin of 75px.
|
If there are two values for the margin property:
Example
Use two values of the margin shorthand property:
Output
The margin shorthand property - Two valuesThis div element has a top and bottom margin of 25px, and a right and left margin of 50px.
|
If there are one values for the margin property:
Example
Use one values of the margin shorthand property:
Output
The margin shorthand property - One valueThis div element has a top, bottom, left, and right margin of 25px.
|
You can set the margin property to auto to horizontally center the item within its container.
The element will then take up the specified width and the remaining space will be divided equally between the left and right margins.
Example
Use margin: auto
Output
The use of margin:autoYou 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: This div will be horizontally centered because it has margin: auto;
|
This example lets the left margin of the <p class="ex1"> element be inherited from the parent element (<div>):
Example
Use of the inherit value:
Output
The use of the inherit valueLet the left margin be inherited from the parent element: This paragraph has an inherited left margin (from the div element). |
Top and bottom margins of elements sometimes collapse into a single margin equal to the biggest of the two margins.
It doesn't occur on the left and right margins. Only top and bottom margins.
Example
Example of margin collapse
Output
In this example the h1 element has a bottom margin of 50px and the h2 element has a top margin of 20px. Then, the vertical margin between h1 and h2 should have been 70px (50px + 20px). However, due to margin collapse, the actual margin ends up being 50px. Heading 1Heading 2 |
In the above example, the <h1> element has a 50px bottom margin and the <h2> element has a 20px top margin.
Common sense would seem to suggest that a total of 70px (50px + 20px) would be the vertical margin between <h1> and <h2>. But because of the collapse of the margin, the actual margin ends up being 50px.
We use cookies to ensure you get the best experience on our website, if you continue to browse you'll be acconsent with our Cookies Policy.
Got it!