Dimensionamento ottimizzato box – margini e padding CSS

Quando si va incontro alla costruzione della struttura di un sito web, bisogna lavorare spesso con Padding, Margin e così via…

Il problema principale che sorge è che Margini e Padding di default vengono considerati oltre la larghezza del box, rappresentata con “Width”.

In particolare la struttura è così:

Width  + Padding + Margin

Questo causa che, se impostiamo una larghezza di 400px, e aggiungiamo dei margini di 10px a destra e sinistra, la larghezza reale sarà 420px. Quel 420px sarà un valore non rappresentato in modo preciso nel codice CSS, bensì va calcolato ogni volta sommando i padding ed i margin.

A mio avviso sarebbe molto meglio avere un valore secondo cui il Width, sia comprensivo di margini e padding.

Ad esempio se avessi un box con larghezza 400px, e poi aggiungo un margine di 10px, questo margine risulta compreso all’interno dei 400px.

Width = Lunghezza + Padding + Margin

Un pò come potete vedere dalla foto seguente…

Per fortuna esiste questa idea di Paul Irlandese che tratta l’applicazione di un comando ( box-resizing: border-box; )

Il codice compatibile con i diversi browser è il seguente:

* { 
   -webkit-box-sizing: border-box; 
   -moz-box-sizing:    border-box; 
   box-sizing:         border-box; 
}

Tuttavia per maggiore compatibilità, estesa anche a browser datati come IE6 ed IE7 bisogna aggiungere altre righe di codice, la procedura è meglio spiegata qui box-sizing.