CSS margin-inline property

Previous Page margin-bottom
Next Page margin-inline-end

Definition and Usage

margin-inline This property specifies the outer margin at the start and end of the line direction, which is a shorthand attribute of the following properties:

margin-inline The value of the property can be set in different ways:

If the margin-inline property has two values:

margin-inline: 10px 50px;

The outer margin at the start is 10px
The outer margin at the end is 50px

If the margin-inline property has a value:

margin-inline: 10px;

margins at the beginning and end are both 10px

CSS margin-inline and margin-block properties are related to the 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 Defined the inline direction. This affects the starting and ending positions of the element, as well as the result of the margin-inline-end attribute. For English pages, the block direction is downward, and the inline direction is from left to right.

Example

Example 1

Sets the margin on both sides of the inline direction:

div {
  margin-inline: 35px;
}

Try it yourself

Example 2

When the attribute value of the <div> element is writing-mode When the attribute value is set to 'vertical-rl', the inline direction is downward. The result is that the starting position of the element moves from the left to the top, and the ending position moves from the right to the bottom:

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

Try it yourself

Example 3

When the attribute value of the <div> element is direction When the attribute value is set to 'rtl', the inline direction is from right to left. The result is that the starting position of the element moves from the left to the right, and the ending position moves from the right to the left:

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

Try it yourself

CSS Syntax

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

Property value

Value	Description
auto	Default value. The default margin-inline value of the element.
length	Specifies margin-inline in units such as px, pt, cm, etc. Negative values are allowed. See:CSS Units.
%	Specifies the percentage of the inline size of the parent element for the margin-inline.
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.marginInline="50px 10px"