Box model: struttura

Il primo esempio mostra chiaramente la struttura di un qualunque box. Nel nostro caso si tratta di un elemento div, ma il concetto si applica a tutti gli elementi di tipo blocco: paragrafi, titoli, etc.

Codice:

#div1 {
background: Silver;
margin : 40px;
border : 10px solid #CC0033;
padding : 10px;
width : 200px;
height : 100px;
}

Da qui dovrebbe emergere bene il concetto fondamentale riguardante la larghezza. La larghezza complessiva dell'elemento, ovvero l'area che occupa sullo schermo, è di 320px. Si calcola così:

margine sin. + padding sin. + bordo sin. + width + padding destro + bordo destro + margine destro

Dunque: 40 + 10 + 10 + 200 + 10 + 10 + 40 = 320

Lo spazio occupato dal div va considerato, in questo caso, dal bordo della finestra fino all''estremo del margine destro.

area del contenuto di #div1

320 pixel

Altra cosa è la proprietà width. Essa è di 200px. E come si vede va intesa come l'area dove trova spazio il testo dell'elemento.


Larghezza

Questo esempio chiarisce bene cosa si intenda per elemento contenitore e come il concetto di larghezza vada sempre rapportato ad esso.

Il primo div (#div2) ha queste impostazioni:

#div2 {
background: Silver;
border : 10px solid #CC0033;
height : 200px;
margin : 10px;
width : 200px;
}

Il secondo div, in esso contenuto (#div3), queste:

#div3 {
background: white;
border: 5px solid black;
}

La sua estensione, non indicando un valore esplicito per width, sarà uguale automaticamente a quella del box contenitore.

Area del contenuto di #div2
Area del contenuto di #div3

L'esempio sotto utile spiega il concetto di percentuale come unità di misura sempre relativa all'elemento parente. Ancora due div annidati. Il div #div3bis ha queste impostazioni:

#div3bis {
background: white;
border: 5px solid black;
width: 50%;
}

Area del contenuto di #div2
Area del contenuto di #div3bis

Width sarà uguale a 100px = 50% di 200px.


Margini verticali

L'esempio mostra chiaramente il comportamento dei margini verticali contigui. Il primo div ha un margine inferiore di 10px. Quello sotto uno superiore di 50px. Se il browser applica bene le regole, il amrgine dovrebbe essere di 50px.

Codice:

#div4 {
background: Silver;
border : 10px solid #CC0033;
height : 100px;
margin-bottom: 10px;
padding : 10px;
width : 100px;
}

#div5 {
background: Silver;
border : 10px solid #CC0033;
height : 100px;
padding : 10px;
width : 100px;
margin-top : 50px;
}

#div4
#div5