Box model

di

Intervenendo sulla cornice, spazio intorno, distanza tra, … di ogni sezione si crea l’effetto box molto interessante

Si ottiene che ogni sezione è incorniciata con

  • border: 4px dashed #000080, bordo tratteggiato blu di 4 pixel
  • margin: 40px, margine di 40 pixel (distanza della sezione dai vicini)
  • padding: 10px, spaziatura di 10 pixel (distanza del contenuto dal bordo)

margin

Con margin si specifica la distanza della sezione dagli elementi contigui

  • margin, distanza unica
  • margin-top margin-left margin-bottom margin-right, specifica della singola distanza
  • margin: ... ... ... ..., distanze top, right, bottom, left rispettivamente

Si potrebbe, al limite, scegliere una distanza diversa da ogni vicino

Padding

Con padding si specifica la distanza del contenuto dalla cornice con le stesse possibilità di margin

  • padding, distanza unica
  • padding-top padding-left padding-bottom padding-right, specifica della singola distanza
  • padding ... ... ... ..., distanze top, right, bottom, left rispettivamente

Si possono anche specificare 2 distanze (top-bottom, left-right) o 3 (top, left-right, bottom)

border

Per il bordo di un blocco ci sono infinite possibilità di personalizzazione!

Stile

  • border-top-style border-right-style border-bottom-style border-left-style
  • border-style, none, dotted, dashed, solid, double, groove, ridge, inset, outset

Spessore

  • border-top-width border-right-width border-bottom-width border-left-width
  • border-width, thin, medium, thick, ...

Colore

  • border-color, da 1 a 4 colori (come padding)

Insieme

Dimensioni

Anche le dimensioni della sezione sono configurabili tramite

  • width, larghezza
  • height, altezza

sia con valori assoluti, px, che relativi, %.

Annidando le sezioni e cambiando colore di fondo/dimensioni si ottengono risultati interessanti.
Ma ci sono differenze tra i browser!

Overflow

Quando l’altezza o la larghezza della sezione è insufficiente per il contenuto i browser adattano la dimensione al contenuto in modo arbitrario.
Con overflow si può stabilire quale sarà il trattamento di questa situazione

Le opzioni sono

  • visible, le dimensioni devono essere cambiate affinché …
  • hidden, le dimensioni rimangono fisse e quindi…
  • scroll, compare una barra di scorrimento
  • auto, comportamento di default del browser

Ci sono differenze tra MS IE e Firefox!