Il modello a riquadri

Dai a un riquadro width: 200px, 16px di padding e un bordo di 2px: per impostazione predefinita occupa 236 pixel di larghezza sullo schermo, non 200.

Ogni elemento è un riquadro

Per impaginare una pagina, il browser trasforma ogni elemento in un rettangolo. Ogni riquadro ha quattro strati, dall'interno all'esterno. L'area del contenuto contiene il testo o l'immagine. Il padding è spazio dentro il riquadro, tra contenuto e bordo, e prende il colore di sfondo del riquadro. Il bordo è una linea intorno al padding. Il margine è spazio fuori dal bordo che allontana gli altri riquadri; è sempre trasparente. Gli strumenti per sviluppatori del browser disegnano proprio questo schema quando ispezioni un elemento, con i numeri già inseriti.

Forma abbreviata per quattro lati

padding, margin e border-width accettano da uno a quattro valori, in senso orario a partire dall'alto. padding: 16px imposta tutti e quattro i lati. padding: 8px 16px imposta sopra e sotto a 8 e sinistra e destra a 16. padding: 4px 8px 12px 16px imposta sopra, destra, sotto e sinistra in quest'ordine. Ogni lato si può anche impostare da solo, come in margin-top. border: 2px solid #333 imposta insieme spessore, stile e colore; senza uno stile come solid o dashed il bordo non viene disegnato affatto.

box-sizing: l'impostazione che quasi tutti cambiano

Per impostazione predefinita width e height impostano solo la dimensione dell'area del contenuto, e padding e bordo si aggiungono sopra. È il modello content-box, e rende scomode le impaginazioni: due riquadri con width: 50% e un po' di padding non stanno più affiancati. Con box-sizing: border-box la larghezza comprende padding e bordo, e l'area del contenuto si restringe per fare spazio. Molti fogli di stile cominciano applicandolo a tutti gli elementi con *, *::before, *::after { box-sizing: border-box; }.

Riquadri di blocco e in linea

I riquadri si comportano in modo diverso secondo il loro valore di display. I riquadri di blocco, come p, h1 e section, cominciano su una nuova riga e si allargano fino a riempire la larghezza del contenitore. I riquadri in linea, come a, strong e span, stanno dentro una riga di testo; width e height non si applicano, e il loro padding e margine verticali non spostano le altre righe. display: inline-block sta a metà strada: il riquadro scorre nella riga come una parola ma rispetta larghezza, altezza e padding, ed è adatto a piccole etichette e pulsanti.

Margini che collassano

Una regola sorprende quasi tutti. Quando il margine inferiore di un blocco incontra il margine superiore del successivo, non si sommano: vince il più grande. Un paragrafo con margin-bottom: 20px seguito da un titolo con margin-top: 30px finisce a 30 pixel di distanza, non 50. Si chiama collasso dei margini, e succede solo ai margini verticali tra blocchi nel flusso normale, non dentro contenitori flex o grid. Per centrare un blocco in orizzontale, dagli un width o un max-width e margin: 0 auto: i due margini laterali automatici si dividono in parti uguali lo spazio libero.