Proprietà CSS padding-bottom
Scopri come la proprietà CSS padding-bottom aggiunge spazio tra il contenuto di un elemento e il suo bordo inferiore, con valori ed esempi.
La proprietà padding-bottom imposta la quantità di spazio tra il contenuto di un elemento e il suo bordo inferiore. Controlla la spaziatura interna solo sul lato inferiore ed è una delle quattro proprietà di padding individuali, insieme a padding-top, padding-left e padding-right.
Comprendere padding-bottom è utile ogni volta che si ha bisogno di uno spazio verticale preciso sotto il testo o altri contenuti — senza influenzare gli elementi circostanti come farebbe margin-bottom.
I valori negativi non sono consentiti per padding-bottom. Il valore minimo è 0.
| Valore iniziale | 0 |
|---|---|
| Si applica a | Tutti gli elementi tranne quelli con display impostato su table-row-group, table-header-group, table-footer-group, table-row, table-column-group o table-column. Si applica anche a ::first-letter. |
| Ereditato | No |
| Animabile | Sì |
| Versione | CSS1 |
| Sintassi DOM | element.style.paddingBottom = "5%"; |
Sintassi
padding-bottom: <length> | <percentage> | initial | inherit;La proprietà accetta un singolo valore. Usare la sintassi abbreviata padding con quattro valori è equivalente, ma imposta tutti e quattro i lati contemporaneamente.
Valori
| Valore | Descrizione |
|---|---|
<length> | Un padding inferiore fisso espresso in qualsiasi unità di misura CSS (px, em, rem, pt, cm, ecc.). Il valore iniziale è 0. |
<percentage> | Il padding inferiore come percentuale della larghezza (non dell'altezza) del blocco contenitore. Questo sorprende molti sviluppatori — vedi la nota qui sotto. |
initial | Reimposta la proprietà al suo valore predefinito (0). |
inherit | Prende il valore calcolato dall'elemento padre. |
I valori percentuali sono relativi alla larghezza del blocco contenitore, non alla sua altezza. Questo vale per tutti e quattro i lati del padding ed è definito dalla specifica CSS. Significa che padding-bottom: 50% crea un'altezza pari alla metà della larghezza del contenitore — una tecnica usata per creare box con rapporto d'aspetto fisso prima che esistesse la proprietà aspect-ratio.
Come padding-bottom influenza il layout
padding-bottom aumenta l'altezza totale dell'elemento. Il calcolo esatto dipende dal valore di box-sizing in uso:
content-box(predefinito):altezza totale = height + padding-top + padding-bottom + border-top + border-bottom. Il valore dipadding-bottomviene aggiunto all'heightspecificata.border-box: l'heightspecificata include padding e bordo. L'aggiunta dipadding-bottomriduce l'area del contenuto anziché far crescere l'elemento.
Esempi
Valore in pixel
L'utilizzo più comune — un numero fisso di pixel sotto il contenuto:
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom with px</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-bottom: 40px;
}
</style>
</head>
<body>
<h2>padding-bottom: 40px</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Valore di lunghezza in centimetri
Qualsiasi unità di misura CSS funziona. Qui viene usato 2cm, utile per i fogli di stile per la stampa:
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom with cm</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-bottom: 2cm;
}
</style>
</head>
<body>
<h2>padding-bottom: 2cm</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Valore percentuale
padding-bottom: 25% aggiunge un padding inferiore pari al 25% della larghezza del blocco contenitore. Questo esempio lo usa per creare una semplice card visiva con spaziatura proporzionale:
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom with %</title>
<style>
.card {
width: 300px;
border: 2px solid #1c87c9;
background: #e8f4fd;
padding-bottom: 25%; /* = 75px (25% of 300px) */
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
}
</style>
</head>
<body>
<div class="card">
<strong>Card title</strong>
<p>The bottom padding equals 25% of the card's width.</p>
</div>
</body>
</html>Uso di em per spaziatura scalabile
Il padding basato su em scala con la dimensione del carattere dell'elemento, mantenendo le proporzioni invariate quando la dimensione del carattere cambia:
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom with em</title>
<style>
.note {
font-size: 18px;
border-left: 4px solid #1c87c9;
padding-left: 12px;
padding-bottom: 1em; /* = 18px, matches font-size */
background: #f0f8ff;
}
</style>
</head>
<body>
<div class="note">
This note box uses <code>padding-bottom: 1em</code>. If you increase
the font size, the bottom padding grows proportionally.
</div>
</body>
</html>Confronto box-sizing
La stessa height e lo stesso padding-bottom si comportano in modo diverso con content-box rispetto a border-box:
<!DOCTYPE html>
<html>
<head>
<title>padding-bottom and box-sizing</title>
<style>
.box {
width: 220px;
height: 80px;
padding-bottom: 40px;
border: 2px solid #333;
background: #d0e8ff;
margin-bottom: 12px;
color: #111;
font-size: 14px;
}
.content-box { box-sizing: content-box; } /* total height = 80+40+4 = 124px */
.border-box { box-sizing: border-box; } /* total height stays 80px */
</style>
</head>
<body>
<div class="box content-box">content-box — total height: 124px</div>
<div class="box border-box">border-box — total height: 80px</div>
</body>
</html>Proprietà correlate
padding— sintassi abbreviata che imposta tutti e quattro i lati contemporaneamente.padding-top— spazio sopra il contenuto.padding-left— spazio a sinistra del contenuto.padding-right— spazio a destra del contenuto.margin-bottom— spazio esterno sotto il bordo dell'elemento (esterno, non interno).box-sizing— controlla se il padding è incluso nellawidth/heightdichiarata.height— l'altezza dell'area del contenuto, influenzata dapadding-bottomin modalitàcontent-box.