Box
Arriviamo alla parte più corposa di tutti i CSS: Box Model e dimensioni. Ti ricordo, anzitutto, che ogni proprietà che vedremo può essere utilizzata su tutti gli elementi, non per forza solo su <box> o su elementi di HTML5.
La teoria del Box Model si basa essenzialmente sul fatto che ogni elemento può essere visto come una scatola (o contenitore) al cui interno possiamo inserire un valore, oppure un’altra scatola, al cui interno, a sua volta, può essere inserito un valore oppure un’altra scatola, e via via di questo passo. Ad esempio:
Qui abbiamo utilizzato 5 contenitori: <section>, <article>, <header>, <h1> e <p>. Anche <h1> e <p> li possiamo considerare come contenitori, in quanto contengono testo. Visti i tag sotto quest’ottica possiamo definire che ogni “scatola” occupa un determinato spazio.
Anzitutto, come hai potuto vedere dal capito introduttivo, abbiamo almeno due tipologie di elementi: block e inline. La differenza è che i block occupano la larghezza totale disponibile, mentre gli inline occupano quanto occupa il suo contenuto. Questo spazio occupato, quindi, lo possiamo scorporare in questo modo:
margin; rappresentano la distanza che intercorre tra due elementi adiacenti; può essere applicato solo ai tipiblockoinline-block;padding; una sorta di “bombatura” dell’elemento rispetto al suo contenuto; potresti vederlo come una sorta di margine interno;border; rappresenta un’ulteriore bordatura esterna dell’elemento;
Sotto questo punto di vista, possiamo dire che le dimensioni di un qualsivoglia elemento sono rappresentate da: dimensione di un elemento = margin + padding + border.
Tieni bene a mente questo asunto perché ti verrà dimostrato tra breve.