margin-bottom
Definition
The margin-bottom CSS property sets the margin area on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
Examples
This will set a bottom margin of 20px for the .box element:
.box {
margin-bottom: 20px;
}
This will remove the bottom margin of the h1 element:
h1 {
margin-bottom: 0;
}
This will set a bottom margin for the .footer element that is equal to 5% of the viewport height plus 10px:
.footer {
margin-bottom: calc(5vh + 10px);
}
Values
| Value | Description |
|---|---|
auto | The browser will calculate the margin. |
<length> | Specifies a fixed bottom margin in units such as px, em, rem, etc. |
<percentage> | Specifies a bottom margin as a percentage of the parent element's width. |
inherit | Inherits the margin from the parent element. |
initial | Sets the bottom margin to its default value. |
unset | Resets the bottom margin to its inherited value if it exists, otherwise to its initial value. |
Best Practices
- Use consistent margins throughout your layout to create a harmonious design.
- Avoid using negative margins as they can cause layout issues and make it harder to maintain your code.
- Use percentage values to create responsive designs that adjust to different screen sizes.
- Avoid using fixed pixel values for margins, as they may not work well on high-density displays or when users zoom in.
- Use 0 as a margin value for elements that need to touch each other, such as a navigation menu and a header.
Browser Compatibility
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |