Proprietà CSS padding-block-end

Pagina precedente padding-block
Pagina successiva padding-block-start

Recomandazione del corso:

Definizione e uso dell'elemento padding-block-end

si riferisce allo spazio tra il bordo dell'elemento e il contenuto alla fine della direzione del blocco. padding-block e padding-inline CSS le proprietà sono simili alle proprietà CSSpadding-bottompadding-toppadding-bottom, e padding-left padding-right 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 padding-block Il risultato dell'attributo. Per le pagine in inglese, la direzione del blocco è verso il basso, la direzione in linea è da sinistra a destra.

Esempio

Esempio 1

Imposta la spaziatura interna alla fine della direzione del blocco:

p {
  padding-block-end: 35px;
}

Prova personalmente

Esempio 2

Imposta il <div> elemento writing-mode Quando l'attributo è impostato su vertical-rl, la direzione del blocco è da destra a sinistra. Di conseguenza, la posizione finale dell'elemento si sposta da basso a sinistra:

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

Prova personalmente

Sintassi CSS

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

Valore dell'attributo

Valore	Descrizione
auto	Predefinito. Il valore predefinito di padding-block-end dell'elemento.
length	Specificare padding-block-end in unità come px, pt, cm, ecc. Non sono ammessi valori negativi. Vedi:Unità CSS.
%	Specificare padding-block-end come percentuale della dimensione dell'elemento padre nella direzione orizzontale.
initial	Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit	Eredita questa proprietà 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.paddingBlockEnd="100px"