Proprietà CSS padding-inline-start

Pagina precedente padding-inline-end
Pagina successiva padding-left

Definizione e uso

elemento padding-inline-start attributi si riferiscono allo spazio tra il bordo e il contenuto all'inizio della direzione inline.

CSS padding-inline e padding-block attributi sono simili agli attributi CSS padding-top,padding-bottom,padding-left e padding-right Sono molto simili, ma padding-inline e padding-block L'attributo dipende dalla direzione inline e dalla direzione del blocco.

Attenzione:proprietà CSS correlate writing-mode e direction Definisce la direzione inline. Questo influisce sulla posizione iniziale e finale dell'elemento nella direzione inline, nonché padding-inline-start Il risultato dell'attributo. Per le pagine in inglese, la direzione del blocco è verso il basso e la direzione inline è da sinistra a destra.

Esempio

Esempio 1

Imposta la spaziatura interna all'inizio della direzione inline:

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

Prova tu stesso

Esempio 2

Imposta l'attributo <div> writing-mode Quando il valore dell'attributo è vertical-rl, la direzione inline è verso il basso. Di conseguenza, la posizione iniziale dell'elemento si sposta dal lato sinistro verso la parte superiore:

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

Prova tu stesso

Esempio 3

Imposta l'attributo <div> direction Quando il valore dell'attributo è rtl, la direzione inline è da destra a sinistra. Di conseguenza, la posizione iniziale dell'elemento si sposta da sinistra a destra:

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

Prova tu stesso

Sintassi CSS

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

Valore dell'attributo

Valore	Descrizione
auto	Predefinito. La distanza predefinita di padding-inline-start dell'elemento.
length	Specificare una distanza in px, pt, cm, ecc. Non sono ammessi valori negativi. Vedi:Unità CSS.
%	Specificare una distanza percentuale rispetto alla dimensione dell'elemento padre nella direzione inline.
initial	Imposta questo attributo al suo valore predefinito. Vedi initial.
inherit	继承此属性自其父元素。Vedi inherit.

Dettagli tecnici

Valore predefinito:	auto
Ereditarietà:	No
Produzione di animazioni:	Supportato. Vedi:Proprietà correlate agli animazioni.
Versione:	CSS3
Sintassi JavaScript:	object.style.paddingInlineStart="100px"