[GUIDA CSS #15] Gestire gli elementi nella pagina: il box model


[GUIDA CSS #15] Gestire gli elementi nella pagina: il box model

In passato vi parlammo dei diversi tipi di elementi che trovate in una pagina web. Oggi impareremo a gestire l’ aspetto visuale di alcuni tipi di elementi (elementi blocco) che, nel mondo del web design, viene chiamato box model. Ogni box model comprende delle proprietà che possiamo gestire a nostro piacimento grazie ai CSS. Andiamo nello specifico.

Prima di tutto, è necessario avere ben chiaro com’è composto il box model e, per aiutarvi a comprendere, inseriamo qui sotto l’ immagine gentilmente presa da HTML.it:

box model

Come potete vedere voi stessi sono quattro gli elementi principali che dovete distinguere:

  • Contenuto: non è nient’ altro che l’ elemento stesso (può essere un’ immagine, un’ animazione flash, etc.);
  • Padding: è lo spazio (modificabile dal foglio di stile) che separa il contenuto dal suo bordo;
  • Bordo: è una linea (modificabile nel colore, dimensione e stile tramite CSS) che circonda l’ elemento e l’ eventuale padding;
  • Margine: è lo spazio (modificabile anch’ esso) che separa i 3 elementi precedenti da quelli adiacenti.

Passiamo ora ad analizzare quali regole governano il box model. Innanzi tutto è ben avere chiaro il concetto di larghezza e altezza totale, la prima espressa con la parola width, la seconda con la parola height. Sia dell’ altezza totale, sia della larghezza, fanno parte, oltre all’ elemento stesso, anche i margini, i bordi e il padding (destro e sinistro nel caso di width, superiore e inferiore nel caso di height). Un altro consiglio che vi diamo è quello di utilizzare <div> come elemento contenitore, e specificare in esso la larghezza e l’ altezza totale del box model.

Potete utilizzare, solo per margini, bordi e padding, anche il valore auto. In questo caso sarà il browser a calcolare il tutto proporzionalmente alla risoluzione del display. Potete usare invece, solo per i margini però, anche dei valori negativi

Infine, prima di concludere, un altro concetto molto interessante e utile da conoscere è quello del cosiddetto margin collapsing. Esso si verifica solamente quando vi sono due box adiacenti verticalmente (non succede orizzontalmente) e il box superiore ha un margine inferiore, mentre il box inferiore ha un margine superiore. La distanza tra i due box non sarà data dal totale dei margini, ma solamente da quello maggiore. Per qualunque dubbio chiedete nei commenti 😉

<- Lezione precedente (Cascade, ereditarietà e specificità)
Lezione successiva () ->

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *