CSS padding-inline-end egenskap

Föregående sida padding-inline
Nästa sida padding-inline-start

Definition och användning

Elementets padding-inline-end betyder utrymmet från elementets kant till innehållet i inline-directionen.

CSS padding-inline och padding-block Egenskaper är liknande till CSS-egenskapen padding-top,padding-bottom,padding-left och padding-right Mycket liknande, men padding-inline och padding-block Egenskapen är beroende av inline-directionen och blockdirectionen.

Observera:relaterade CSS-egenskaper writing-mode och direction Definierar inline-directionen. Detta påverkar elementets början och slutposition i inline-directionen samt padding-inline-end Egenskapens resultat. För engelska sidor är blockdirectionen nedåt och inline-directionen från vänster till höger.

Exempel

Exempel 1

Ställ in innerspår vid slutet av inline-directionen:

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

Prova själv

Exempel 2

Sätt <div>-elementets writing-mode När egenskapsvärdet sätts till vertical-rl är inline-directionen nedåt. Resultatet är att elementets slutposition flyttas från höger till botten:

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

Prova själv

Exempel 3

Sätt <div>-elementets direction När egenskapsvärdet sätts till rtl är inline-directionen från höger till vänster. Resultatet är att elementets slutposition flyttas från höger till vänster:

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde	Beskrivning
auto	Standardvärde. Elementets standard padding-inline-end avstånd.
length	Specificera avstånd i enheter som px, pt, cm, etc. Negativa värden är inte tillåtna. Se:CSS enheter.
%	Specificera en procentsats av avståndet från föräldrelementet i inline-direction.
initial	Sätt denna egenskap till dess standardvärde. Se: initial.
inherit	Inheriterar denna egenskap från föräldrelementet. Se: inherit.

Tekniska detaljer

Standardvärde:	auto
Arvbarhet:	Nej
Animationsskapande:	Stöd. Se:Animation relaterade egenskaper.
Version:	CSS3
JavaScript-syntax:	object.style.paddingInlineEnd="100px"