1. css
  2. /properties
  3. /margin-bottom

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

ValueDescription
autoThe 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.
inheritInherits the margin from the parent element.
initialSets the bottom margin to its default value.
unsetResets 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

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes