box-model-4

Ecco come funziona il box model degli elementi block-leve in xhtml/css.

width = (content area width + padding left + padding right + border left width + border right width)

La diversa applicazione del box model è particolarmente evidente visitando questa pagina con explorer <6 e dal 6 in su. In IE <6 l'ampiezza complessiva dell'elemento è di circa il 60%. Il padding ruba cioè spazio all'area del contenuto, non allo spazio del contenitore. Da IE 6 in poi il box model viene applicato più correttamente, almeno per quanto riguarda l'ampiezza complessiva.

Rimane però un problema con IE fino alla 7. Si noti che il padding, da specifica CSS, viene calcolato sull’ampiezza dell’elemento contenitore (cioè sul 100% dello spazio esterno disponibile), non dell’elemento al quale è assegnata. IE fino alla versione 7 lo calcola invece sull’ampiezza dell’elemento al quale è stato assegnato (cioè sul 60%). Solo dalla versione 8 il box model applicato è uguale a FF, Saf4 e Opera.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.