CSS padding-inline egenskab

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

Definition og brug

Elementets padding-inline Er en kortform for at referere til pladsen fra kant til indhold i inline-richtung. Det er en kortform for følgende egenskaber:

padding-inline Værdierne for egenskaben kan indstilles på forskellige måder:

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

padding-inline: 10px 50px;

Startens indre margin er 10px
Endens indre margin er 50px

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

padding-inline: 10px;

Begge start- og slutmargener er 10px

CSS padding-inline og padding-block egenskaber er ens med CSS-egenskaber padding-top,padding-bottom,padding-left og padding-right er meget ligner, 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 Egenskabets resultat. For engelske sider er blokretningen nedad, og inline-retningen er fra venstre til højre.

Eksempel

Eksempel 1

Indstil inderside margen på begge sider af inline-retningen:

div {
  padding-inline: 50px;
}

Prøv det selv

Eksempel 2

Når <div>-elementets writing-mode Når egenskabsværdien sættes til vertical-rl, er inline-retningen nedad. Resultatet er, at elementets startende ende flyttes til toppen og afsluttende ende flyttes til bunden:

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

Prøv det selv

Eksempel 3

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

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

Prøv det selv

CSS syntaks

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

Egenskabsværdi

Værdi	Beskrivelse
auto	Standard. Elementets standard padding-inline-afstand.
length	Angiv afstanden i enheder som px, pt, cm osv. Negative værdier er ikke tilladt. Se:CSS enheder.
%	Angiv afstanden som en procentdel af forældre elementets indre størrelse i inline-retningen.
initial	Sæt denne egenskab til dens standardværdi. Se: initial.
inherit	Arver denne egenskab fra sin forældre element. Se: inherit.

Tekniske detaljer

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