Proprietà CSS padding-inline

Pagina precedente padding-bottom
Pagina successiva padding-inline-end

Definizione e uso

L'elemento padding-inline Si riferisce allo spazio tra il bordo e il contenuto nella direzione inline. È un abbreviazione degli attributi seguenti:

padding-inline Il valore dell'attributo può essere impostato in diversi modi:

Se l'attributo padding-inline ha due valori:

padding-inline: 10px 50px;

Il margine interno dell'inizio è di 10px
Il margine interno della fine è di 50px

Se l'attributo padding-inline ha un valore:

padding-inline: 10px;

Le margini interne iniziale e finale sono entrambe di 10px

CSS padding-inline e padding-block attributi sono simili agli attributi CSS padding-top,padding-bottom,padding-left e padding-right molto simile, 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 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 margine interna su entrambi i lati della direzione inline:

div {
  padding-inline: 50px;
}

Prova tu stesso

Esempio 2

Quando l'elemento <div> ha writing-mode Quando il valore dell'attributo è impostato su vertical-rl, la direzione inline è verso il basso. Di conseguenza, l'estremità iniziale dell'elemento si sposta dalla sinistra in alto e l'estremità finale si sposta dalla destra in basso:

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

Prova tu stesso

Esempio 3

Quando l'elemento <div> ha direction Quando il valore dell'attributo è impostato su rtl, la direzione inline è da destra a sinistra. Di conseguenza, l'estremità iniziale dell'elemento si sposta dalla sinistra destra e l'estremità finale si sposta dalla destra sinistra:

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

Prova tu stesso

Sintassi CSS

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

Valore dell'attributo

Valore	Descrizione
auto	Predefinito. La distanza predefinita di padding-inline dell'elemento.
length	Specifica la distanza con unità come px, pt, cm, ecc. Non sono ammessi valori negativi. Vedi:Unità CSS.
%	Specifica la distanza in percentuale della dimensione in direzione inline dell'elemento padre.
initial	Imposta questo attributo al suo valore predefinito. Vedi initial.
inherit	Inherita questo attributo dal suo elemento padre. Vedi inherit.

Dettagli tecnici

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