Archivi categoria: front end

Box-Sizing Border Box Come rispettare le percentuali di dimensione layout

Spesso progettando un sito ci si trova a combattere con padding e bordi.
Supponiamo di voler avere un sito a due colonne che occupino sempre il 50% ciascuna.
Andando a disegnare un layout, se aggiungiamo un bordo o un padding ad una colonna, succede che la colonna si sfalsa.
Un grosso vantaggio è l’introduzione del concetto css Box-sizing. Impostandolo a border-box possiamo rispettare le nostre percentuali a prescindere dal padding e i bordi.

Il codice sopra fa sfalsare la visualizzazione delle colonne. Mettendo invece come box-sizing border-box, anche mettendo bordi e padding molto alti, le colonne occuperanno sempre la percentuale indicata nel css, questo perché con box-sizing a border-box, viene considerata la larghezza tenendo conto di bordo e padding.

Come vediamo dalla foto, le colonne restano perfettamente flottate.

padding e bordo gestiti dalla proprietà box-sizing a border-box
padding e bordo gestiti dalla proprietà box-sizing a border-box