CSS Margins specify the space and position of the element on the web page. There are basically 4 properties that can be used to specify the margins for the elements:
1 2 3 4 5 6 | <style> div { margin: 50px; border: 2px solid green; } </style> |
CSS margin example
1 |
- margin-top
- margin-bottom
- margin-right
- margin-left
1 2 3 4 5 6 7 | div { margin-top: 100px; margin-bottom: 60px; margin-left: 60px; margin-right: 30px; border: 2px solid green; } |
The value for the margin properties can be of following 4 types:
- auto: Auto-Calculated Margins
- length: Specific length in px, cm, pt etc.
- percentage: Specific percentage of the containing element
- inherit: The margin here is inherited from the parent element
We will now know more about auto and inherit values.
CSS Margin auto value
The auto Value provides the margin so that the element is horizontally centered in its containing element. Here’s an example for the same:
1 2 3 4 5 | div { width: 200px; margin: auto; border: 1px solid blue; } |
Here the property being used for margin is the shorthand property for margin.
Although, the auto Value is only for the horizontal margins, for the rest of the values, the order of margin properties is
margin-top>margin-right>margin-bottom>margin-left
A sample code for the same is:
1 2 3 4 | .one { margin: 60px 30px 100px 40px; border: 1px solid maroon; } |
CSS Margin inherit value
As specified earlier, the margin value is inherited from the parent element. For example, if a paragraph or <p> element has its parent element as a <div> then the margin can be inherited as:
1 2 3 4 5 6 7 8 9 | div { margin-left: 100px; background-color: #F6DDCC; } p { margin-left: inherit; background-color: #F1C40F; } |
Thus, the <p> element will have a right margin of 100px whenever it is being used within the <div>element.
Margin collapse
The margin property has another interesting feature of collapsing into a single margin for the top and bottom values. The following example will help to understand this better:
1 2 3 4 5 6 | h1 { margin: 0 0 40px 0; } h2 { margin: 30px 0 0 0; } |
Here, the bottom margin for h1 is 40 and the top margin for h2 is 30. Logically, the total margin between h1 and h2 should be 40+30=70px but due to margin collapse, it will be 40px as that is the greater value.