Proprietà margin-inline-start CSS

Pagina precedente margin-inline-end
Pagina successiva margin-left

Definizione e utilizzo

Defines the inline direction. This affects the starting and ending positions of the element, as well as Specifica la margina esterna iniziale di direzione orizzontale.

CSS's Properties are very similar, but related CSS properties margin-inline properties are related to margin-topmargin-bottom,margin-bottommargin-left related CSS properties , margin-right Properties are very similar, but related CSS properties margin-inline margin-block

The property depends on the block direction and inline direction.Note: writing-mode related CSS properties direction and 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

div {
  Set the margin at the starting end of the inline direction:
}

Try It Yourself

Example 2

When the 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 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:Unità CSS.
%	Specifies margin-inline-start as a percentage of the parent element's inline size in the direction of the inline axis.
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 Production:	Supported. See:Animation-related properties.
Version:	CSS3
JavaScript Syntax:	object.style.marginInlineStart="50px"