Visualizzatore del modello a scatole.

Ogni elemento HTML viene renderizzato come un rettangolo. Il modello a scatola CSS descrive come i livelli di contenuto, padding, border e margin dell'elemento si sovrappongono per determinare lo spazio totale che l'elemento occupa nella pagina. Comprendere questo modello è fondamentale per controllare layout e spaziature.

Regola gli input numerici per ogni livello — margin, border, padding e dimensioni del contenuto. Fai clic su una sezione di livello per evidenziarla nel diagramma. L'anteprima visiva si aggiorna istantaneamente e il codice CSS corrispondente viene generato in basso per poterlo copiare.

Il margin è lo spazio trasparente fuori dal border che separa l'elemento dai vicini. Il border è il confine visibile attorno al padding. Il padding è lo spazio tra il border e il contenuto effettivo. Il content è l'area più interna dove appaiono testo ed elementi figli.

Con content-box (predefinito), la larghezza e l'altezza impostate si applicano solo all'area del contenuto — padding e border vengono aggiunti sopra. Con border-box, larghezza e altezza includono padding e border, rendendo i calcoli di layout più intuitivi. La maggior parte dei progetti moderni usa border-box a livello globale.

Usa questo visualizzatore per sperimentare con diversi valori e vedere come ogni livello contribuisce alle dimensioni totali dell'elemento. Quando un elemento occupa più spazio del previsto, verifica se i valori di padding o border lo spingono oltre la larghezza desiderata. Il CSS generato può essere incollato direttamente nel tuo progetto.