CSS margin-inline-start property

Previous Page margin-inline-end
Next Page margin-left

Definition and usage

margin-inline-start The attribute specifies the outer margin at the starting end of the inline direction.

CSS's margin-inline and margin-block properties are related to margin-top,margin-bottom,margin-left and margin-right properties are very similar, but margin-inline and margin-block The property depends on the block direction and inline direction.

Note:related CSS properties writing-mode and direction Defines the inline direction. This affects the starting and ending positions of the element, as well as margin-inline-start The result of the property. For English pages, the block direction is downward, and the inline direction is from left to right.

Instance

Example 1

Set the margin at the starting end of the inline direction:

div {
  margin-inline-start: 35px;
}

Try It Yourself

Example 2

When the <div> element's writing-mode When the property value is set to 'vertical-rl', the inline direction is downward. The result is that the starting end of the element moves from the left to the top:

div {
  margin-inline-start: 50px;
  writing-mode: vertical-rl;
}

Try It Yourself

Example 3

When the <div> element's direction When the property value is set to 'rtl', the inline direction is from right to left. The result is that the starting end of the element still starts from the original left position and applies the margin, but because the direction is from right to left, the actual layout effect will be different:

div {
  margin-inline-start: 50px;
  direction: rtl;
}

Try It Yourself

CSS Syntax

margin-inline-start: auto|length|initial|inherit;

Property Value

Value	Description
auto	Default Value. The default margin-inline-start value of the element.
length	Specifies margin-inline-start in units such as px, pt, cm, etc. Negative values are allowed. See:CSS Units.
%	Specifies margin-inline-start as a percentage of the parent element's size in the inline direction.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Technical Details

Default Value:	auto
Inheritance:	No
Animation Creation:	Supported. See:Animation-related properties.
Version:	CSS3
JavaScript Syntax:	object.style.marginInlineStart="50px"