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.
This will set a margin of 20px on the leading inline (horizontal) side of the .box element:
This will remove the margin on the leading inline (horizontal) side of the h1 element:
This will set a margin of 1rem on the leading inline (horizontal) side of the .image element:
|The browser will calculate the margin.
|Specifies a fixed margin in units such as px, em, rem, etc.
|Specifies a margin as a percentage of the parent element's width.
|Inherits the margin from the parent element.
|Sets the margin to its default value.
|Resets the margin to its inherited value if it exists, otherwise to its initial value.
- 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.