CSS margin-inline-end property

Previous Page margin-inline
Next Page margin-inline-start

Definition and Usage

margin-inline-end attributes specify the margin of the end of the inline direction.

CSS's margin-inline and margin-block attributes are similar to margin-top,margin-bottom,margin-left and margin-right The attribute is very similar, but margin-inline and margin-block The attribute 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-end The result of the attribute. For English pages, the block direction is downward, and the inline direction is from left to right.

Instance

Example 1

Set the margin of the end of the inline direction:

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

Try It Yourself

Example 2

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

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

Try It Yourself

Example 3

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

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

Try It Yourself

CSS Syntax

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

Attribute Value

Value	Description
auto	Default Value. The default margin-inline-end value of the element.
length	Specify margin-inline-end in units such as px, pt, cm, etc. Negative values are allowed. See:CSS Units.
%	Specify margin-inline-end as a percentage of the inline size of the parent element.
initial	Set this attribute to its default value. See initial.
inherit	This attribute is inherited 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.marginInlineEnd="50px"