Zoomart Design - Web Agency Napoli
box-sizing
15 agosto 2010
CSS3 offre una nuova proprietà, chiamata box-sizing, in grado di cambiare il modo in cui il browser determina la larghezza di un elemento. Il valore di default è content-box, che fa in modo che altezza e larghezza vengano calcolate come specificato da CSS2.1, ovvero aggiungendo lo spessore del bordo ed il valore del padding alle dimensioni del contenitore. Cambiando questo valore con border-box, si forza il browser a generare un contenitore con altezza e larghezza fissate, e ad aggiungere lo spessore del bordo ed il valore del padding all’interno del contenitore.
Ecco un esempio:
I due contenitori dovrebbero apparire affiancati ed occupare il 50% della larghezza del box (rosso) in cui si trovano (bordi inclusi). Se invece si trovano uno sull’altro vuol dire che il browser che si sta utilizzando non supporta la proprietà box-sizing; per coloro che non visualizzano in modo corretto l’esempio, ecco uno screenshot del risultato:
Il codice CSS utilizzato è il seguente:
-webkit-box-sizing:border-box;
box-sizing:border-box;
border:10px ridge silver;
float:left;
height:40px;
padding:2px;
width:50%;