CSS padding-inline-start egenskap

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

Definition och användning

Elementets padding-inline-start Egenskaper refererar till utrymmet från kant till innehåll i inline-directionen.

CSS padding-inline och padding-block Egenskaper är lika med CSS-egenskaper padding-top,padding-bottom,padding-left och padding-right Mycket lika, 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 start- och slutpositioner i inline-directionen samt padding-inline-start Resultatet av egenskapen. För engelska sidor är blockdirectionen nedåt, inline-directionen är från vänster till höger.

Exempel

Exempel 1

Ställ in inre marginalen vid början av inline-directionen:

div {
  padding-inline-start: 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 startposition flyttas från vänster till toppen:

div {
  writing-mode: vertical-rl;
  padding-inline-start: 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 startposition flyttas från vänster till höger:

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde	Beskrivning
auto	Standard. Elementets standard padding-inline-start avstånd.
length	Specificera avstånd i enheter som px, pt, cm osv. Det är inte tillåtet att använda negativa värden. Se:CSS enheter.
%	Specificera en procentsats av avståndet till storleken på föräldraelementet i inline-directionen.
initial	Ställ in denna egenskap till dess standardvärde. Se: initial.
inherit	Följande är att arbeta från den föräldralementet. Se: inherit.

Tekniska detaljer

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