Visualizzatore del modello a riquadro CSS

Come usare

1. Inserisci i valori del modello di box: definisci margine, bordo, padding e dimensioni del contenuto nei campi o nei cursori interattivi.
2. Esplora la visualizzazione: il diagramma classico di box annidati si aggiorna in tempo reale — margine (arancione), bordo (giallo), padding (verde) e contenuto (blu), tutti chiaramente etichettati.
3. Copia il CSS: clicca su Copia il CSS per ottenere le proprietà complete del modello di box dell'elemento configurato.

Perché usare il visualizzatore del modello di box CSS?

Il modello di box CSS è uno dei concetti più fondamentali del layout web — e una delle fonti di bug più comuni, soprattutto quando si mescolano valori di box-sizing, fusione di margini e dimensionamento dei bordi. Questo visualizzatore interattivo rende il modello di box concreto e tangibile: regoli i valori e vedi immediatamente come margine, bordo e padding si impilano attorno al contenuto. Essenziale per imparare, eseguire il debug e insegnare il CSS.

Funzionalità

• Diagramma interattivo: la vista classica del modello di box annidato con strati codificati per colore (margine, bordo, padding, contenuto).
• Alternanza box-sizing: passa tra content-box e border-box per vedere come ogni modalità influisce sulle dimensioni totali.
• Lati individuali: definisci i valori alto/destra/basso/sinistra indipendentemente per margine, padding e bordo.
• Calcolo della dimensione totale: visualizza la larghezza e l'altezza totali calcolate dell'elemento.
• Output CSS: genera CSS pronto all'uso per il modello di box configurato.

Domande frequenti

Qual è la differenza tra content-box e border-box?

Con content-box (predefinito), width e height si applicano solo all'area di contenuto — padding e bordo si aggiungono alla dimensione totale dell'elemento. Con border-box, width e height includono padding e bordo, il che rende le dimensioni più prevedibili. La maggior parte dei reset CSS moderni applica box-sizing: border-box a tutti gli elementi.

Cos'è la fusione dei margini?

Quando due margini verticali si toccano (tra elementi block adiacenti o tra genitore e primo/ultimo figlio), si fondono in un singolo margine uguale al maggiore dei due valori. Questo non avviene con i figli flex o grid, né con elementi che hanno padding o bordi.

Come rimuovere lo spazio extra sotto gli elementi inline?

Gli elementi inline (come <img>) hanno un piccolo spazio sotto di loro causato dall'allineamento della baseline del line-height. Risolvilo mettendo display: block sull'elemento, o vertical-align: bottom, o font-size: 0 sul genitore.