margin-inline-start
Definition
The margin-inline-start CSS property defines the logical inline start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. 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 leading inline (horizontal) side of the .box element:
.box {
margin-inline-start: 20px;
}
This will remove the margin on the leading inline (horizontal) side of the h1 element:
h1 {
margin-inline-start: 0;
}
This will set a margin of 1rem on the leading inline (horizontal) side of the .image element:
.image {
margin-inline-start: 1rem;
}
Values
| Value | Description |
|---|---|
auto | The 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. |
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 |