CSS inset-inline-start egenskap

定义和用法

inset-inline-start Definition och användning

Observera:egenskap för att sätta elementets början i textriktningen i förhållande till föräldrelementet. För att detta egenskap ska fungera måste du specificera position

CSS: inset-inline och inset-block egenskaper är lika med CSS: top,bottom,left och right Egenskaperna är mycket lika, men inset-block och inset-inline Egenskapen beror på blockriktning och textriktning.

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

Exempel

Exempel 1

Ställ in avståndet mellan en positionerad <div>-element och föräldrelementet i textriktningen:

div {
  inset-inline-start: 50px;
}

Prova själv

Exempel 2

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

div {
  inset-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 riktningen i textflödet från höger till vänster. Beskrivningen har en liten felaktighet, den bör vara "Resultatet är att elementets början fortfarande förblir till höger (eftersom för rtl är början redan till höger, men relativt den standard ltr-layout har hela innehållet vridits)":

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

Prova själv

CSS-syntaks

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

Egenskapsvärde

Tekniska detaljer

Webbläsarstöd

Tabellens nummer anger den första webbläsareversion som helt stöder detta egenskap.

Relaterade sidor

Tutorial:CSS-positionering

Referens:CSS position egenskap

Referens:CSS riktning egenskap

Referens:CSS writing-mode egenskap