1. css
  2. /properties
  3. /margin-inline-end

margin-inline-end

Definition

The margin-inline-end CSS property defines the logical inline end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. In other words, it corresponds to the margin-top, margin-right, margin-bottom or margin-left property depending on the values defined for writing-mode, direction, and text-orientation.

Examples

This will set a margin of 20px on the trailing inline (horizontal) side of the .box element:

.box {
  margin-inline-end: 20px;
}

This will remove the margin on the trailing inline (horizontal) side of the h1 element:

h1 {
  margin-inline-end: 0;
}

This will set a margin of 1rem on the trailing inline (horizontal) side of the .image element:

.image {
  margin-inline-end: 1rem;
}

Values

ValueDescription
autoThe browser will calculate the margin.
<length>Specifies a fixed margin in units such as px, em, rem, etc.
<percentage>Specifies a margin as a percentage of the parent element's width.
inheritInherits the margin from the parent element.
initialSets the margin to its default value.
unsetResets the 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