CSS padding-inline-start egenskab

Forrige side padding-inline-end
Næste side padding-left

Definition og brug

elementets padding-inline-start egenskaber refererer til det rum, der er mellem kant og indhold i inline-retningen.

CSS padding-inline og padding-block egenskaber er ens med CSS-egenskaber padding-top,padding-bottom,padding-left og padding-right er meget lignende, men padding-inline og padding-block Egenskaben afhænger af inline-retningen og blokretningen.

Bemærk:relaterede CSS-egenskaber writing-mode og direction Definerer inline-retningen. Dette påvirker elementets start- og slutpositioner i inline-retningen samt padding-inline-start Resultatet af egenskaben. For engelske sider er blokretningen nedadgående, og inline-retningen er fra venstre til højre.

Eksempel

Eksempel 1

Indstil indre kant af startposition i inline-retningen:

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

Prøv det selv

Eksempel 2

Sæt <div>-elementets writing-mode Når egenskabsværdien sættes til vertical-rl, er inline-retningen nedadgående. Resultatet er, at elementets startposition flyttes fra venstre til toppen:

div {
  writing-mode: vertical-rl;
  padding-inline-start: 100px;
}

Prøv det selv

Eksempel 3

Sæt <div>-elementets direction Når egenskabsværdien sættes til rtl, er inline-retningen fra højre til venstre. Resultatet er, at elementets startposition flyttes fra venstre til højre:

div {
  direction: rtl;
  padding-inline-start: 100px;
}

Prøv det selv

CSS syntaks

padding-inline-start: auto|value|initial|inherit;

Egenskabsværdi

Værdi	Beskrivelse
auto	Standard. Standard padding-inline-start-afstand for elementet.
length	Specificer afstanden i enheder som px, pt, cm osv. Negative værdier er ikke tilladt. Se:CSS enheder.
%	Specificer en procentdel af afstanden i forhold til størrelsen af forældrelementet i inline-retningen.
initial	Sæt denne egenskab til dens standardværdi. Se: initial.
inherit	Arver denne egenskab fra sin forældrelement. Se: inherit.

Tekniske detaljer

Standardværdi:	auto
Arvbarhed:	Nej
Animation production:	Understøttet. Se:Animationsrelaterede egenskaber.
Version:	CSS3
JavaScript syntaks:	object.style.paddingInlineStart="100px"