margin-inline
Definition
The margin-inline CSS property is a shorthand property that sets the margin area on both the leading and trailing inline (horizontal) sides of an element. It creates space between the element's content and its surrounding elements in the inline direction.
Examples
This will set a margin of 20px on both the leading and trailing inline (horizontal) sides of the .box element:
.box {
margin-inline: 20px;
}
This will remove the margin on both the leading and trailing inline (horizontal) sides of the h1 element:
h1 {
margin-inline: 0;
}
This will set a margin of 1rem on the leading inline (horizontal) side and 2rem on the trailing inline (horizontal) side of the .image element:
.image {
margin-inline: 1rem 2rem;
}
Values
| Value | Description |
|---|---|
<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. |
auto | The browser will calculate the margin. |
inherit | Inherits the margin from the parent element. |
initial | Sets the margin to its default value. |
unset | Resets 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
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |