Le proprietà padding in CSS sono usate per generare spazio attorno il contenuto di un elemento, all'interno di bordi definiti.

Con i CSS, si ha il controllo totale sul padding. Ci sono proprietà per impostare il padding per ciascun lato di un elemento (superiore, destro, inferiore e sinistro).

Padding - Lati individuali

I CSS hanno proprietà per specificare il padding per ciascun lato di un elemento:

• padding-top
• padding-right
• padding-bottom
• padding-left

Tutte le proprietà di padding possono avere i seguenti valori:

• length - specifica il padding in px, pt, cm, etc.
• % - specifica il padding in % della larghezza dell'elemento contenitore
• inherit - specifica che il padding dovrebbe essere ereditato dall'elemento genitore

Esempio

Imposta i padding differenti per tutti e quattro i lati di un elemento <div>:

div {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

Padding - Proprietà abbreviata

Per accorciare il codice, è possibile specificare tutte le proprietà padding in una proprietà.

La proprietà padding è una proprietà abbreviata per le seguenti proprietà individuali di padding:

• padding-top
• padding-right
• padding-bottom
• padding-left

Ecco come funziona:

Se la proprietà padding ha 4 valori:

• padding: 25px 50px 75px 100px;
  • il padding superiore è 25px
  • il padding destro è 50px
  • il padding inferiore è 75px
  • il padding sinistro è 100px

Esempio

Usa la proprietà abbreviata padding con 4 valori:

div {
    padding: 25px 50px 75px 100px;
}

Se la proprietà padding ha 3 valori:

• padding: 25px 50px 75px;
  • il padding superiore è 25px
  • i padding destro e sinistro sono 50px
  • il padding inferiore è 75px

Esempio

Usa la proprietà abbreviata padding con 3 valori:

div {
    padding: 25px 50px 75px;
}

Se la proprietà padding ha 2 valori:

• padding: 25px 50px;
  • i padding superiore e inferiore sono 25px
  • i padding destro e sinistro sono 50px

Esempio

Usa la proprietà abbreviata padding con 2 valori:

div {
    padding: 25px 50px;
}

Se la proprietà padding ha 1 valore:

• padding: 25px;
  • tutti e quattro i padding sono 25px

Esempio

Usa la proprietà abbreviata padding con 1 valore:

div {
    padding: 25px;
}

Il Padding e l'elemento Width

La proprietà CSS width specifica la larghezza dell'area del contenuto dell'elemento. L'area del contenuto è la porzione all'interno del padding, del bordo e dei margini di un elemento (il box model).

Quindi, se un elemento ha una larghezza specifica, il padding aggiunto a quell'elemento sarà aggiunto alla larghezza totale dell'elemento. Questo è spesso un risultato indesiderato.

Esempio

Qui, l'elemento <div> è largo 300px. Tuttavia, la larghezza reale dell'elemento <div> sarà 350px (300px + 25px del padding sinistro + 25px del padding destro):

div {
    width: 300px;
    padding: 25px;
}

Per mantenere la larghezza a 300px, non importa quanto sia l'ammontare del padding, si può usare la proprietà box-sizing. Questo consente all'elemento di mantenere la sua larghezza; se si aumenta il padding, lo spazio del contenuto diminuirà.

Esempio

Usa la proprietà box-sizing per mantenere la larghezza a 300px, non importa quanto sia l'ammontare del padding:

div {
    width: 300px;
    padding: 25px;
    box-sizing: border-box;
}

Tutte le proprietà CSS Padding