CSS margin-inline egenskab

Forrige side margin-bottom
Næste side margin-inline-end

Definition og brug

margin-inline Egenskaben specificerer begyndelses- og afslutningsmargenen i rækkefølgen, og er en forkortelse for følgende egenskaber:

margin-inline Egenskabets værdi kan indstilles på forskellige måder:

Hvis margin-inline-egenskaben har to værdier:

margin-inline: 10px 50px;

Startens margin er 10px
Afslutningens margin er 50px

Hvis margin-inline-egenskaben har en værdi:

margin-inline: 10px;

the outer margins at the start and end are both 10px

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 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 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

Set 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 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 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;

Attribute 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. Negative values are allowed. See:CSS enheder.
%	Specifies the percentage of the inline size relative to the parent element in the inline direction. 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 production:	Supported. See:Animation-related properties.
Version:	CSS3
JavaScript-syntaks:	object.style.marginInline="50px 10px"