Padding in CSS

Le proprietà CSS di padding vengono utilizzate per creare spazio intorno al contenuto di un elemento, all’interno di qualsiasi bordo definito.

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

Padding - Lati Singoli

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

• padding-top (padding superiore)

• padding-right (padding destro)

• padding-bottom (padding inferiore)

• padding-left (padding sinistro) Tutte le proprietà di padding possono avere i seguenti valori:

• length - specifica un padding in px, pt, cm, ecc.

• % - specifica un padding in % della larghezza dell’elemento contenitore

• inherit - specifica che il padding dovrebbe essere ereditato dall’elemento genitore ⚠ I valori negativi non sono consentiti.

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à di padding in una sola proprietà.

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

• padding-top (padding superiore)
• padding-right (padding destro)
• padding-bottom (padding inferiore)
• padding-left (padding sinistro)

Se la proprietà del padding ha quattro valori:

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

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

Se la proprietà del padding ha tre valori:

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

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

Se la proprietà del padding ha due valori:

p {
  padding: 25px 50px;
}

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

Se la proprietà del padding ha un solo valore:

p {
  padding: 25px;
}

tutti e quattro i padding sono 25px

Padding e Larghezza dell’Elemento

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

Quindi, se un elemento ha una larghezza specificata, il padding aggiunto a quell’elemento verrà aggiunto alla larghezza totale dell’elemento. Questo è spesso un risultato indesiderato.

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

Per mantenere la larghezza a 300px, indipendentemente dalla quantità di padding, puoi utilizzare la proprietà box-sizing. Ciò fa sì che l’elemento mantenga la sua larghezza effettiva; se aumenti il padding, lo spazio disponibile per il contenuto diminuirà.

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