Proprietà CSS padding-block

Pagina precedente padding
Pagina successiva padding-block-end

definizione e uso

elemento padding-block è il spazio tra il bordo e il contenuto in direzione di blocco, è l'abbreviazione delle seguenti proprietà:

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

Se l'attributo padding-block ha due valori:

padding-block: 10px 50px;

Il margine interno iniziale è di 10px
Il margine interno finale è di 50px

Se l'attributo padding-block ha un valore:

padding-block: 10px;

I margini interni iniziale e finale sono entrambi di 10px

CSS padding-block e padding-inline le proprietà sono simili alle proprietà CSS padding-top,padding-bottom,padding-left e padding-right molto simile, ma padding-block e padding-inline L'attributo dipende dalla direzione del blocco e dalla direzione in linea.

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

Esempio

Esempio 1

Imposta il margine interno laterale della direzione del blocco:

p {
  padding-block: 35px;
}

Prova te stesso

Esempio 2

Quando l'elemento <div> ha writing-mode Quando l'attributo value è impostato a vertical-rl, la posizione iniziale dell'elemento si sposta dalla parte superiore a destra e la posizione finale si sposta dalla parte inferiore a sinistra:

div {
  writing-mode: vertical-rl;
  padding-block: 10px 50px;
}

Prova te stesso

Sintassi CSS

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

Valore dell'attributo

Valore	Descrizione
auto	Valore predefinito. Il valore predefinito di padding-block dell'elemento.
length	Specifica padding-block in px, pt, cm e altri unità. Non sono ammessi valori negativi. Vedi:Unità CSS.
%	Specifica padding-block come percentuale della dimensione dell'elemento padre nella direzione in linea.
initial	Imposta questo attributo al suo valore predefinito. Vedi initial.
inherit	Eredita 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.paddingBlock="100px 50px"