HTML and CSS Reference
In-Depth Information
Figura 5.1 - Secondo il box model, il contenuto di un tag viene messo in un rettangolo.
A questo punto il browser prende in considerazione il padding. Aggiungendo questo spazio
ai quattro lati del rettangolo, ne otteniamo uno nuovo più grande del precedente, o delle
stesse dimensioni se il padding è 0.
A questo punto del processo, il box model ha due rettangoli, così come mostrato nella
figura 5.2 e le dimensioni dell'elemento non sono più solo quelle del testo contenuto, ma
quelle del testo più il padding.
Figura 5.2 - Secondo il box model, il secondo rettangolo comprende l'area del primo ret-
tangolo con l'aggiunta del padding.
Secondo le specifiche del box model, ora è il momento di creare un nuovo rettangolo, la
cui dimensione è data da quella dei rettangoli precedenti con l'aggiunta del parametro CSS
border . Ovviamente, se il bordo è 0, la dimensione di questo nuovo rettangolo è la stessa
di quelli inclusi. Questo nuovo rettangolo è visibile nella figura 5.3 .
Figura 5.3 - Secondo il box model, il terzo rettangolo comprende l'area dei primi due ret-
tangoli con l'aggiunta del bordo.
L'ultimo passo nel calcolo delle dimensioni di un elemento consiste nel creare un quarto
rettangolo (che ovviamente include i precedenti), la cui dimensione è data dalla dimensione
 
Search WWH ::




Custom Search