CSS margin-inline egenskap

Föregående sida margin-bottom
Nästa sida margin-inline-end

Definition och användning

margin-inline Attributet specificerar sidomarginalen vid början och slutet av radriktningen, och är en förkortning av följande attribut:

margin-inline Attributvärden kan sättas upp på olika sätt:

Om margin-inline-attributet har två värden:

margin-inline: 10px 50px;

Startsidomarginal är 10px
Avslutande sidomarginal är 50px

Om margin-inline-attributet har ett värde:

margin-inline: 10px;

margin-inline: 10px;

Marginaler vid början och slutet är båda 10px margin-inline och margin-block Attributet är lika med CSS:s margin-top,margin-bottom,margin-left och margin-right Attribut är mycket lika, men margin-inline och margin-block Egenskapen beror på blockriktning och inre riktning.

Observera:Relaterade CSS-attribut writing-mode och direction Definierar inre riktning. Detta påverkar elementets start- och slutpositioner samt resultatet av margin-inline-end-attributet. För engelska sidor är blockriktningen nedåt och inre riktningen är från vänster till höger.

Exempel

Exempel 1

Ställ in sidomarginaler i radriktningen:

div {
  margin-inline: 35px;
}

Prova själv

Exempel 2

När <div>-elementets writing-mode När egenskapsvärdet är satt till 'vertical-rl' är riktningen i raden nedåt. Resultatet är att elementets startposition flyttas från vänster till toppen och slutpositionen från höger till botten:

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

Prova själv

Exempel 3

När <div>-elementets direction När egenskapsvärdet är satt till 'rtl' är riktningen i raden från höger till vänster. Resultatet är att elementets startposition flyttas från vänster till höger och slutpositionen från höger till vänster:

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde	Beskrivning
auto	Standardvärde. Elementets standard margin-inline-värde.
length	Specificera margin-inline i enheter som px, pt, cm osv. Tillåter negativa värden. Se:CSS units.
%	Specificera en procentsats av storleken på radriktningen för margin-inline.
initial	Sätt detta värde till dess standardvärde. Se: initial.
inherit	Följande från föräldrelementet. Se: inherit.

Tekniska detaljer

Standardvärde:	auto
Arvbarhet:	Nej
Animation tillverkning:	Stöd. Se:Animation relaterade egenskaper.
Version:	CSS3
JavaScript-syntax:	object.style.marginInline="50px 10px"