Proprietà CSS padding-top
Come usare la proprietà CSS padding-top per definire lo spazio di padding nella parte superiore di un elemento. Valori e esempi.
La proprietà CSS padding-top imposta l'altezza dell'area di padding sul lato superiore di un elemento — lo spazio tra il contenuto dell'elemento (o il suo bordo superiore) e il contenuto che si trova sopra di esso all'interno del box.
Il padding è lo strato più interno del modello a box CSS: dall'interno verso l'esterno troviamo il contenuto, poi il padding, poi il bordo, poi il margin. A differenza del margin, il padding è all'interno dell'elemento, quindi condivide il colore di sfondo dell'elemento e fa parte dell'area cliccabile/visibile.
Usa padding-top quando vuoi spingere il contenuto verso il basso rispetto al bordo superiore del suo contenitore — ad esempio, per dare respiro a un'intestazione sotto il bordo superiore di una card, oppure per aggiungere ritmo verticale all'interno di un pulsante o di un callout senza influire sulla spaziatura tra elementi separati (questo è il compito del margin).
I valori negativi non sono validi. Se devi spostare il contenuto verso l'alto, usa un margin-top negativo.
Questa proprietà non influisce visibilmente sugli elementi inline come <span> — il padding verticale su un box inline non modifica l'altezza di riga né spinge le righe circostanti. Imposta display: inline-block o display: block sull'elemento se vuoi che il padding superiore abbia effetto.
| Valore iniziale | 0 |
|---|---|
| Si applica a | Tutti gli elementi, tranne quando la proprietà display è impostata su table-row-group, table-header-group, table-footer-group, table-row, table-column-group e table-column. Si applica anche a ::first-letter. |
| Ereditata | No. |
| Animabile | Sì. Lo spazio di padding è animabile. |
| Versione | CSS1 |
| Sintassi DOM | object.style.paddingTop = "10px"; |
Sintassi
Sintassi della proprietà CSS padding-top
padding-top: length | initial | inherit;Esempio della proprietà padding-top:
Esempio della proprietà CSS padding-top con valore px
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
border: 2px solid #666;
color: #8ebf42;
padding-top: 30px;
}
</style>
</head>
<body>
<h2>Padding-top property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Risultato
Esempio della proprietà padding-top impostata in "em".
Esempio della proprietà CSS padding-top con valore em
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
border: 2px solid #666;
color: #8ebf42;
padding-top: 4em;
}
</style>
</head>
<body>
<h2>Padding-top property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Un valore em è relativo alla font-size dell'elemento stesso, quindi padding-top: 4em si scala insieme al testo. Questo è utile quando si vuole che la spaziatura cresca e si riduca insieme al font.
Esempio della proprietà padding-top specificata in percentuale:
Il valore percentuale è particolare: viene calcolato rispetto alla larghezza del blocco contenitore, non alla sua altezza. Quindi padding-top: 15% significa il 15% della larghezza del genitore. Questa peculiarità è alla base della classica tecnica dell'aspect-ratio per mantenere un box proporzionale durante il ridimensionamento.
Esempio della proprietà CSS padding-top con valore "%":
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
border: 2px solid #cccccc;
color: #8ebf42;
padding-top: 15%;
}
</style>
</head>
<body>
<h2>Padding-top property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Valori
| Valore | Descrizione | Prova |
|---|---|---|
| length | Imposta il padding superiore in px, pt, cm, ecc. Il valore predefinito è 0. | Prova » |
| % | Imposta il padding superiore in % della larghezza dell'elemento contenitore. | Prova » |
| initial | Fa sì che la proprietà utilizzi il suo valore predefinito. | Prova » |
| inherit | Eredita la proprietà dall'elemento genitore. |
padding-top vs. la shorthand padding
padding-top controlla un solo lato. Quando si impostano più lati contemporaneamente, la shorthand padding è più concisa. Queste due regole sono equivalenti:
/* longhand */
padding-top: 30px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 10px;
/* shorthand: top right bottom left (clockwise) */
padding: 30px 10px 30px 10px;Con due valori, padding: 30px 10px imposta top/bottom a 30px e left/right a 10px. Usa la forma estesa padding-top quando vuoi modificare solo il lato superiore senza toccare gli altri. Vedi anche padding-bottom per il lato opposto.
Come padding-top influisce sulle dimensioni dell'elemento
Per impostazione predefinita (box-sizing: content-box), il padding viene aggiunto in cima all'height dichiarata. Un elemento con height: 100px e padding-top: 30px viene reso alto 130px. Se si imposta box-sizing: border-box, il padding viene disegnato all'interno dell'altezza dichiarata, quindi l'elemento rimane alto 100px e l'area del contenuto si riduce. Questa è una frequente causa del bug "perché il mio box è troppo alto".