Il box model css, teoria e pratica.

Per comprendere meglio come si comprta il box model css cominciamo a spiegare che i blocchi o DIV delle pagine web possono avere delle proprietà come ad esempio un padding, un margin e dei bordi, un'immagine di sfondo o un colore.

Cominciamo a descriverli uno per uno:
  • Il padding è lo spazio interno tra l'estremità del blocco e il suo contenuto (testi, immagini, vide), quindi serve a distanziare gli elementi contenuti nel blocco dal bordo dello stesso.
  • Il margin è lo spazio esterno al blocco che serve a separare gli altri blocchi adiacenti, creando così uno spazio tra i blocchi contenuti nella pagina.
  • Il bordo è la linea di di demarcazione del blocco, che può avere anche valore zero.

 il box model css

Come si presenta il Box model Css

L'immagine sopra mostra un esempio di box model

Qui vengono mostrati tutte le proprietà del box model.

  1. background-color: il colore di sfondo del blocco
  2. Width: la larghezza
  3. Height: l'altezza
  4. Padding
  5. Margin
  6. Border

 

La comprensione sia teorica che pratica del Box model vi aiuterà a comprendere alcuni concetti astratti e vi fornirà gli strumenti per lavorare alla creazione di siti internet senza problemi, utilizzando la tecnologia dei fogli di stile a cascata, i Css.

Domande sul Box model?

Se avete delle domande da pormi potrete commentare questo articolo o scrivermi: Contatto

Alt

Luca Sanna

grafico creativo, web designer, web developer.


Blog tag: Css, Web design