CSS margin-inline-start egenskap

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

Definition och användning

margin-inline-start Egenskapen specificerar den inre marginalen vid början av radsiktningen.

CSS's margin-inline och margin-block egenskaperna jämfört med margin-top,margin-bottom,margin-left och margin-right Egenskaperna är mycket lika, men margin-inline och margin-block Egenskapen är beroende av blockriktning och inline-riktning.

Observera:relaterade CSS-egenskaper writing-mode och direction Definierar inline-riktningen. Detta påverkar elementets början och slutposition, samt margin-inline-start Resultatet av egenskapen. För engelska sidor är blockriktningen neråt, och inline-riktningen är från vänster till höger.

Exempel

Exempel 1

Ställ in marginalen för elementets början i inline-riktningen:

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

Prova själv

Exempel 2

När <div>-elementets writing-mode När egenskapsvärdet sätts till 'vertical-rl' är inline-riktningen neråt. Resultatet är att elementets början flyttas från vänster till toppen:

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

Prova själv

Exempel 3

När <div>-elementets direction När egenskapsvärdet sätts till 'rtl' är inline-riktningen från höger till vänster. Resultatet är att elementets början fortfarande appliceras från den ursprungliga vänstra positionen, men eftersom riktningen är från höger till vänster kommer layouteffekten att vara annorlunda:

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde	Beskrivning
auto	Standardvärde. Standardvärdet för margin-inline-start för elementet.
length	Specificera margin-inline-start i enheter som px, pt, cm osv. Negativa värden är tillåtna. Se:CSS enheter.
%	Specificera margin-inline-start som en procentandel av föräldrelementets storlek i inline-riktningen.
initial	Sätt denna egenskap till dess standardvärde. Se: initial.
inherit	Följande är att ärva denna egenskap från föräldrelementet. Se: inherit.

Tekniska detaljer

Standardvärde:	auto
Arv:	Nej
Animeringsproduktion:	Stöds. Se:Animeringsrelaterade egenskaper.
Version:	CSS3
JavaScript-syntax:	object.style.marginInlineStart="50px"