CSS padding-inline egenskap

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

Definition and Usage

The element's padding-inline It refers to the space from the border to the content in the inline direction. It is a shorthand attribute for the following properties:

padding-inline The value of the property can be set in different ways:

If the padding-inline property has two values:

padding-inline: 10px 50px;

The inner padding at the start is 10px
The inner padding at the end is 50px

Om padding-inline-egenskapen har ett värde:

padding-inline: 10px;

Innerspacingen vid början och slutet är båda 10px

CSS padding-inline och padding-block Egenskapen är lik den CSS-egenskapen padding-top,padding-bottom,padding-left och padding-right Mycket liknande, men padding-inline och padding-block Egenskapen är beroende av inline-direction och blockdirection.

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

Exempel

Exempel 1

Ställ in innerspacing på båda sidor av inline-directionen:

div {
  padding-inline: 50px;
}

Prova själv

Exempel 2

När <div>-elementets writing-mode När egenskapsvärdet är satt till vertical-rl är inline-directionen neråt. Resultatet är att elementets början flyttas från vänster till toppen och slutet från höger till botten:

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

Prova själv

Exempel 3

När <div>-elementets direction När egenskapsvärdet är satt till rtl är inline-directionen från höger till vänster. Resultatet är att elementets början flyttas från vänster till höger och slutet från höger till vänster:

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde	Beskrivning
auto	Standard. Elementets standard padding-inline avstånd.
length	Ange avståndet i enheter som px, pt, cm osv. Negativa värden är inte tillåtna. Se till:CSS enheter.
%	Ange avståndet som en procentandel av storleken på föräldrelementet i inline-direction.
initial	Ställ in detta egenskap till dess standardvärde. Se till: initial.
inherit	Följande egenskap från dess föräldrelement. Se till: inherit.

Tekniska detaljer

Standardvärde:	auto
Arvande:	Nej
Animation tillverkning:	Stöd. Se till:Animation relaterade egenskaper.
Version:	CSS3
JavaScript-syntax:	object.style.paddingInline="100px 20px"