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.

Cosa definisce davvero il box model CSS

Il box model CSS è la rappresentazione rettangolare di ogni elemento su una pagina web. Ogni elemento ha quattro box concentrici: il box content (dove vivono testo, immagini, elementi figli), il box padding (spazio tra contenuto e bordo, dentro il confine visibile), il box border (il contorno visibile disegnato attorno al padding) e il box margin (spazio trasparente fuori dal bordo che separa questo elemento dai suoi vicini). La dimensione visibile totale di un elemento è content + padding + border; il margin è invisibile ma respinge gli altri elementi.

Il concetto critico è box-sizing. Per default (box-sizing: content-box, il valore della specifica CSS 1), le proprietà width e height si applicano solo al box content. Se imposti width: 200px; padding: 20px; border: 2px solid, la larghezza totale renderizzata è 200 + 40 + 4 = 244 pixel. Questo è poco intuitivo: un elemento largo 200px occupa effettivamente 244 pixel di spazio orizzontale. L'alternativa box-sizing: border-box (aggiunta in CSS 3) inverte questo: la proprietà width è la dimensione visibile totale incluso padding e border, quindi l'area content si restringe per adattarsi. border-box è ciò che la maggior parte degli sviluppatori si aspetta; è diventato lo standard di fatto tramite il reset CSS di Paul Irish del 2012 * { box-sizing: border-box }.

Capire il box model è importante perché i bug di layout quasi sempre risalgono alla confusione su quale valore si applica a quale box. Perché il mio elemento è più largo di quanto ho impostato? è la sorpresa del content-box. Perché il mio margin non spinge giù i fratelli? è di solito il collasso del margin. Perché padding-top: 50% si comporta in modo strano? è perché il padding percentuale è calcolato relativamente alla larghezza del genitore, non all'altezza. Ogni sviluppatore CSS incontra queste confusioni; questo visualizzatore le rende concrete lasciandoti regolare i valori e vedere la geometria del box risultante in tempo reale.

Come funziona questo strumento sotto il cofano

Il diagramma interattivo è una serie di div colorati annidati corrispondenti a ogni box (margin in arancione, border in giallo, padding in verde, content in blu). Mentre cambi i valori di input, JavaScript aggiorna gli attributi style inline dei div del diagramma così riflettono i valori numericamente e visivamente. Le proporzioni sono scalate per adattarsi all'area di anteprima; valori pixel assoluti spingerebbero il diagramma fuori schermo per input tipici.

Il calcolo della dimensione totale dipende dalla modalità box-sizing. Per content-box: larghezza totale = larghezza content + padding-left + padding-right + border-left + border-right. Per border-box: larghezza totale = il valore width (padding e border sono sottratti dall'area content). Lo strumento calcola entrambe le modalità simultaneamente quando attivi box-sizing, così puoi confrontare direttamente.

L'output CSS generato usa i tuoi input come valori delle proprietà: box-sizing: border-box; width: 200px; padding: 10px 20px; border: 2px solid; margin: 1rem auto;. Copia questo direttamente nel tuo foglio di stile e applica la classe corrispondente. Nulla lascia il tuo browser; tutto gira localmente in JavaScript. Niente analytics, niente backend, niente account. Ricarica e lo stato è sparito.

Breve storia del box model CSS

• CSS 1 specifica content-box, 1996.La raccomandazione CSS 1 (dicembre 1996) definisce il box model W3C: width si applica solo al content, padding e border si aggiungono alla dimensione totale. Questo diventa lo standard, ma Internet Explorer 4 e 5 implementano un modello alternativo dove width include padding e border (simile all'odierno border-box).
• Quirks mode di IE e Box Model War, dal 1997 al 2001.IE 4 (1997) e IE 5 spediscono con il loro box model non standard; IE 6 (2001) introduce la modalità standard attivata da una dichiarazione doctype che passa al box model W3C. La discrepanza crea anni di bug di layout cross-browser e la conoscenza quirks mode vs standards mode che ogni sviluppatore web deve imparare fino al 2010.
• Reset CSS e foglio di stile classico di Eric Meyer, 2007.Eric Meyer pubblica il reset CSS canonico (maggio 2007) che imposta margin, padding e altri default a zero su tutti gli elementi. Diventa pratica standard per uno styling cross-browser prevedibile. Il reset non affronta direttamente box-sizing ma normalizza il caos attorno ai default ereditati.
• Proprietà box-sizing in CSS3, dal 2009 al 2014.CSS3 introduce box-sizing: border-box come alternativa opt-in al content-box. WebKit e Firefox la supportano dal 2009; IE 8 (2009) diventa la prima versione IE a supportarla nativamente. Permette agli sviluppatori di scegliere il box model in stile IE o stile W3C per elemento.
• border-box universale di Paul Irish, 2012.Paul Irish (Google) pubblica il post sul blog * { box-sizing: border-box } FTW (febbraio 2012), sostenendo che il border-box universale è un default sensato per i nuovi progetti. Il pattern si diffonde rapidamente attraverso i default dei framework (Bootstrap, Tailwind, Material UI). Entro il 2015, la maggior parte dei reset CSS e dei framework spedisce con border-box come default.
• Proprietà logiche, dal 2018 al 2024.CSS Logical Properties and Values Module Level 1 (CR giugno 2018) introduce alternative agnostiche alla direzione: margin-inline-start (inizio della direzione del testo) invece di margin-left, padding-block (top + bottom) invece di padding-top + padding-bottom. Critico per lingue da destra a sinistra (arabo, ebraico) e l'internazionalizzazione moderna. Il supporto browser raggiunge il 95%+ entro il 2022.

Flussi di lavoro reali

• Debug dei bug di layout.Quando un elemento si renderizza a una dimensione inaspettata, aprire il pannello dello stile calcolato del DevTools del browser rivela i quattro valori del box numericamente. Questo visualizzatore è utile per calcolare la matematica in anticipo: se imposto width 200, padding 16, border 2, qual è la dimensione totale in ogni modalità box-sizing? Particolarmente utile quando insegni ai junior perché width: 100% con padding sborda dal genitore in modalità content-box.
• Insegnare CSS ai principianti.Il box model è il primo concetto astratto che i principianti dello sviluppo web devono interiorizzare. Una visualizzazione interattiva colorata batte la lettura delle specifiche. Gli istruttori di bootcamp e gli autodidatti usano i visualizzatori del box model come modo tattile per vedere come margin, border e padding si impilano. Questo strumento esiste in parte per questo scopo.
• Dimensionamento dei componenti del design system.I design system specificano altezze dei pulsanti, ritmi di padding e scale di margin in token (ad esempio, spacing-1, spacing-2, spacing-3). Quando si implementano nel codice, il box model determina se il pulsante renderizzato finale ha la dimensione prevista. Visualizza prima la matematica per cogliere gli errori off-by-padding prima che arrivino al passaggio Figma-to-React.
• Design responsive e margin percentuali.I valori percentuali per padding, margin, width e height sono calcolati relativamente alla larghezza content del genitore (non altezza, sorprendentemente), il che può causare comportamenti strani su mobile. Il visualizzatore del box model ti aiuta a ragionare su cosa significano le percentuali prima di scrivere il CSS. Ad esempio, padding-top: 50% su un div crea un container con aspect-ratio quadrato (usato per i placeholder di immagini nei giorni pre-proprietà aspect-ratio).
• Dimensionamento dei target tattili per l'accessibilità.WCAG 2.1 SC 2.5.5 (Livello AAA) raccomanda target tattili minimi di 44x44 pixel CSS. Il box model determina se la somma content + padding di un pulsante soddisfa questa soglia. Usa il visualizzatore per confermare che padding: 12px 16px attorno a testo con line-height 18px dà un pulsante che supera i 44px in entrambe le dimensioni, soddisfacendo la linea guida.
• Allineamento CSS Grid e Flexbox.Gli strumenti di layout moderni (CSS Grid, Flexbox) trattano ogni elemento grid/flex come un box soggetto al box model. Capire come padding e margin interagiscono con gap, justify-content e align-items richiede fluidità con il box model. Il collasso del margin è soppresso dentro i container flex/grid, cosa che sorprende spesso gli sviluppatori CSS abituati al layout block tradizionale.

Trappole comuni e cosa significano

• Sorprese del collasso del margin.Quando due elementi block hanno margin che si toccano verticalmente, collassano nel più grande dei due, non nella somma. Un margin bottom di 20px che incontra un margin top di 30px produce 30px di spazio, non 50px. Anche i margin di genitore e primo/ultimo figlio collassano se il genitore non ha padding, border o overflow impostati. Dentro container flex o grid, i margin non collassano. Questa regola ha colto in fallo ogni sviluppatore CSS prima o poi.
• Matematica width content-box vs border-box.Impostare width: 100%; padding: 20px su un elemento content-box lo rende 40px più largo del genitore (overflow). Con border-box, la stessa dichiarazione si siede dentro il genitore correttamente. Questa è la singola gotcha più comune del box model; la regola universale * { box-sizing: border-box } ne risolve la maggior parte in anticipo. Sappi sempre in quale modalità stai lavorando.
• Padding/margin percentuale è relativo alla larghezza.padding-top: 50% e margin-bottom: 50% calcolano la percentuale in base alla larghezza content del genitore, non all'altezza. Questo è non ovvio ed è la base del classico hack del container ad aspect ratio (un div con padding-top: 56.25% crea un box 16:9). Ora CSS ha la proprietà aspect-ratio, ma il codice legacy e Tailwind moderno si affidano entrambi al trucco del padding percentuale.
• Gap della baseline degli elementi inline.Un <img> dentro un div contenitore ha un misterioso gap di 4-6 pixel sotto di esso. Questo perché gli elementi inline si allineano alla baseline del testo, lasciando spazio per i discendenti. Risolvi con img { display: block }, img { vertical-align: bottom }, o impostando font-size: 0 sul genitore. Questo è uno dei bug più antichi del box model in CSS, risalente al 1996.
• Margin negativi per trucchi di layout.I margin accettano valori negativi, che attirano gli elementi l'uno verso l'altro ed è occasionalmente utile (ad esempio, espandere un container fuori dal padding del suo genitore). Tuttavia, i margin negativi sono una fonte frequente di bug di sovrapposizione confondenti. Usali deliberatamente, commenta il tuo codice e preferisci il posizionamento CSS Grid/Flexbox quando possibile. Il padding negativo è CSS invalido e ignorato dai browser.
• Padding + border + content > container.Quando la somma di content + padding + border eccede la larghezza disponibile del genitore, l'elemento sborda. Soluzioni comuni: box-sizing: border-box, riduzione del valore width, uso di overflow: hidden sul genitore (taglia l'overflow), o min-width: 0 sui figli flex per sovrascrivere il comportamento implicito min-width: auto. Molti bug il layout si rompe su mobile sono overflow causati dalla matematica del box model.

Privacy: tutto gira nel tuo browser

Gli strumenti di apprendimento e visualizzazione CSS arrivano in due varianti: semplici pagine HTML che eseguono JavaScript lato client (private, veloci, senza setup) ed editor cloud con progetti salvati (collaborativi ma con compromessi di privacy). Questo strumento è del primo tipo. I tuoi valori inseriti, lo stato del toggle box-sizing, il tuo CSS generato: tutto resta nella tua sessione browser. Ricarica la pagina e lo stato è sparito a meno che tu non abbia copiato il CSS prima.

Le poste in gioco della privacy sono basse qui perché i valori del box model raramente contengono informazioni sensibili. Comunque, la mancanza di analytics conta: puoi sperimentare liberamente senza che il tuo processo di prova ed errore venga registrato. Particolarmente utile in contesti di classe o di formazione aziendale dove avere studenti o tirocinanti che registrano account su piattaforme di terze parti è un punto di attrito. Questa è una singola pagina statica senza backend, utilizzabile in qualsiasi browser, comprese le macchine enterprise bloccate.

Quando un altro strumento è la scelta giusta

• DevTools del browser per il debug live.I DevTools di Chrome e Firefox includono un pannello box model che mostra i quattro valori del box per qualsiasi elemento selezionato su una pagina live. Modifica i valori inline e vedi la pagina aggiornarsi. Per il debug di layout pagina reali (non esplorazione astratta del box model), i DevTools battono questo strumento perché funzionano sul tuo codice reale con cascate CSS reali ed ereditarietà.
• Figma per l'output di design-spec.I designer usano Figma, Sketch o Adobe XD per fare il layout dei componenti con misurazioni in pixel esatte. Il pannello di ispezione dello strumento di design esporta valori di margin e padding che gli sviluppatori traducono in CSS. Per il passaggio design-a-sviluppo, lo strumento di design è la fonte di verità; questo visualizzatore serve a capire il comportamento CSS, non a generare specifiche di componenti di produzione.
• CSS-in-JS per l'incapsulamento dei componenti.Quando costruisci librerie di componenti con styled-components, Emotion, vanilla-extract o soluzioni CSS-in-JS simili, il box model è incapsulato dentro ogni componente. Margin sul wrapper più esterno, padding all'interno. Questo visualizzatore aiuta a ragionare sulla geometria di un singolo componente; la libreria gestisce il coordinamento del layout tra componenti.
• Strumenti CSS Grid/Flexbox per il layout.Per layout multi-elemento (griglie di pagina, gallerie di card, barre di navigazione), CSS Grid e Flexbox sono le astrazioni giuste, non il box model da solo. I nostri strumenti Flexbox Generator e CSS Grid Generator aiutano con quei layout direttamente. Il box model è necessario ma non sufficiente per il layout moderno; usa lo strumento giusto per la scala giusta.

Altre domande frequenti

Dovrei usare il * { box-sizing: border-box } universale?

Per la maggior parte dei progetti, sì. La proposta del 2012 di Paul Irish è ora il default del settore e si allinea con come la maggior parte degli sviluppatori si aspetta che width e height funzionino. Framework come Bootstrap, Tailwind, Bulma e Material UI spediscono con border-box come default. I progetti moderni che iniziano nel 2026 dovrebbero impostare *, *::before, *::after { box-sizing: border-box; } all'inizio del loro reset, e raramente hanno bisogno di pensare a box-sizing di nuovo. Override specifici a content-box sono possibili per singoli elementi dove border-box rovinerebbe le cose.

Perché il mio margin spinge giù il genitore invece di spingere i fratelli?

Questo è il collasso del margin. Quando il margin top di un figlio incontra il bordo top del genitore senza padding/border in mezzo, il margin del figlio fugge e si applica al genitore invece. Soluzioni: aggiungi padding-top: 1px al genitore (qualsiasi valore funziona), aggiungi border: 1px solid transparent, imposta il genitore come container flex o grid (il collasso è soppresso in quelle modalità), o usa display: flow-root sul genitore (una regola moderna esplicita stabilisci un nuovo contesto di formattazione block). Tutto questo blocca il margin dal collassare attraverso.

Qual è la differenza tra margin: auto e margin: 0?

margin: 0 significa nessun margin; l'elemento è a filo con i suoi vicini. margin: auto significa che il browser calcola il margin per distribuire lo spazio orizzontale rimanente, tipicamente usato per centrare un elemento block: margin-left: auto; margin-right: auto; divide equamente lo spazio rimanente. margin: auto auto auto auto (o shorthand margin: auto) centra sia orizzontalmente che verticalmente dentro un container flex. Fuori da flex/grid, funzionano solo i margin auto orizzontali.

In cosa si differenzia outline da border?

Outline disegna attorno a un elemento ma è fuori dal box model: non si aggiunge alla dimensione dell'elemento e non spinge via i vicini. Border è parte del box model e si aggiunge alla dimensione renderizzata. Outline è tipicamente usato per gli anelli di focus (outline :focus-visible) dove vuoi un indicatore visibile senza spostare il layout. Border è usato quando la linea dovrebbe essere parte della struttura dell'elemento. Non rimuovere outline: none senza fornire un indicatore di focus alternativo; farlo rompe l'accessibilità da tastiera.

Perché usare le proprietà logiche come margin-inline-start?

Le proprietà logiche (margin-block-start, padding-inline, ecc.) si adattano alla direzione di scrittura del documento. In inglese (da sinistra a destra), margin-inline-start è la stessa cosa di margin-left. In arabo o ebraico (da destra a sinistra), diventa margin-right automaticamente. Per siti che supportano più lingue, le proprietà logiche rendono l'internazionalizzazione CSS automatica. Per siti solo in inglese, sono equivalenti nell'effetto ma segnalano l'intento più chiaramente: questo margin è all'inizio del flusso del testo invece di questo margin è sul lato sinistro.

Come creo un box ad aspect-ratio fisso?

Il modo moderno è la proprietà CSS aspect-ratio: aspect-ratio: 16/9 su un div rende la sua altezza automaticamente 9/16 della sua larghezza. Supportata in tutti i browser moderni (2021+). La tecnica legacy usa padding-top come percentuale: un div con padding-top: 56.25% crea un rapporto 16:9 (9/16 = 56.25%). Il trucco del padding-top funziona ancora ma la sintassi della proprietà è più pulita. Usa aspect-ratio per nuovo codice; l'hack legacy rimane in Tailwind e altri strumenti che hanno bisogno di un ampio supporto browser.