padding

La proprietà CSS padding, definisce la porzione più interna del box model, creando spazio attorno al contenuto di un elemento, all’interno di qualsiasi margini definiti o bordi.

I valori del padding sono impostati utilizzando le misure di lunghezza o le percentuali e non sono ammessi valori negativi. Il valore iniziale, o predefinito, per tutte le proprietà del padding è 0.

Proprietà Shorthand

.container {
  padding: 0 1rem 0 1rem;
}

Questo esempio utilizza la proprietà shorthand del padding, che accetta quattro valori, come mostrato qui:

.container {
  padding: sopra | destra | sotto | sinistra;
}

Se sono inseriti meno di quattro valori, i valori mancanti sono basati su quelli già definiti. Per esempio, inserendo due valori, come nell’esempio seguente, si otterrà un risultato uguale a quello del primo esempio.

.container {
  padding: 0 1rem;
}

Se solo un valore è dichiarato, sarà valido per tutte e quattro le proprietà del padding:

.container {
  padding: 1rem;
}

Se sono dichiarati due valori, come nel seguente esempio, saranno validi per sopra, destra e sinistra e sotto.

.container {
  padding: 1rem 2rem 0.5rem;
}

Proprietà Longhand

Tutte le proprietà del padding, possono essere impostati utilizzando anche le proprietà longhand, in questo caso,

.container {
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
}

Padding e Dimensioni di un Elemento

Se un elemento ha una larghezza o altezza specificata, un eventuale padding aggiunto si andrà a sommare a quel valore. Questo è spesso un risultato non desiderato dato che richiede che la larghezza o altezza di un elemento venga ricalcolata ogni volta che il padding è modificato.

Per risolvere questo problema, è possibile utilizzare la proprietà box-sizing, in questo modo:

.container {
  width: 300px;
  padding: 1rem;
  box-sizing: border-box;
}

Questo permette all’elemento di mantenere la sua larghezza o altezza anche quando si aggiunge padding, però lo spazio del contenuto viene diminuito.