Rebelia.it

02 - Il box-model

Notizia del 15/04/2007

Ogni tag - sia esso blocco o in linea - ha alcuni elementi che lo caratterizzano; questi elementi possono essere modificati tramite i fogli di stile.

Gli elementi sono:

• Contenuto: il contenuto vero e proprio del tag.
• Padding: è lo spazio attaccato al contenuto e tutt'attorno ad esso; non ha particolari caratteristiche che lo rendano visibile, tranne lo spessore.
• Border: è l'elemento subito dopo il padding e a differenza del primo può avere uno spessore visibile (un border può essere di 3 pixel, solido e di colore rosso per esempio).
• Margin: come il padding, non ha particolari caratteristiche tranne lo spessore ed è lo spazio che distanzia il bordo dell'elemento dal bordo - o meglio dal margin - dell'elemento adiacente.

Graficamente il box-model può essere rappresentato in questo modo:

I nomi sono stati scritti in inglese, perché è in questo modo che saranno poi identificati nel foglio di stile.

Di norma i tre parametri padding - border - margin sono impostati a 0, perciò invisibili; volendo, ognuno di essi può però essere impostato sia allo stesso modo che diversamente sui quattro lati; qui di seguito vediamo un esempio di impostazione diversa per ogni lato di ogni elemento:

Come si vede, ogni lato è diverso dall'altro e ogni elemento ha le proprie caratteristiche; inoltre si può notare come padding e margin abbiano solo lo spessore, mentre il bordo - unico "visibile" dei tre - prevede oltre allo spessore anche il tipo (solido, tratteggiato etc) e il colore.

I campi con * sono obbligatori.