Box Model CSS: Margin vs Padding, Border, Display | We.Inc
Trascina gli slider per contenuto, padding, border e margin e guarda il box model ridisegnarsi, con box-sizing, margin collapsing, stili del bordo e ogni valore di display confrontati dal vivo.
Ogni elemento è disegnato come rettangoli annidati: il contenuto, poi il padding (spazio dentro il bordo, colorato con lo sfondo), poi il bordo, poi il margin (spazio trasparente all'esterno che allontana gli elementi vicini). Con box-sizing: border-box, la larghezza che imposti include padding e bordo, il che rende i layout molto più prevedibili. La proprietà display decide come scorrono i box.
I quattro livelli, dall'interno verso l'esterno
Livello
Cosa fa
Riceve lo sfondo?
Contenuto
Contiene testo, immagini ed elementi figli
Sì
Padding
Spazio di respiro tra contenuto e bordo
Sì
Bordo
Una linea visibile (o niente) attorno al padding
Il proprio colore del bordo
Margin
Distanza tra questo box e i suoi vicini
No, sempre trasparente
Sposta i quattro slider e il diagramma, la dimensione totale misurata e il CSS cambiano insieme. Sotto il visualizzatore puoi cambiare box-sizing, guardare due margin fondersi in uno e confrontare block, inline, inline-block, flex, grid e none affiancati sugli stessi tre elementi.
Imposta larghezza e altezza dell'area del contenuto, poi aggiungi padding, bordo e margin con gli slider.
Passa box-sizing da content-box a border-box e nota come cambia la larghezza renderizzata.
Leggi la larghezza e l'altezza totali che l'elemento occupa davvero, margin compresi.
Copia il CSS generato, poi scorri in basso per le demo di margin collapse e display.
Aggiungi *, *::before, *::after { box-sizing: border-box; } in cima a ogni foglio di stile. La maggior parte dei reset e dei framework lo fa già.
Usa il padding quando vuoi che lo sfondo o un'area cliccabile si ingrandisca, e il margin quando vuoi solo distanza tra elementi separati.
In un contenitore flex o grid preferisci gap ai margin sui figli. Non si raddoppia mai ai bordi.
L'outline è disegnato fuori dal bordo e non occupa spazio, ed è per questo che gli anelli di focus lo usano al posto del border.
Domande frequenti
Qual è la differenza tra margin e padding?
Il padding sta dentro il bordo, quindi è riempito dallo sfondo dell'elemento e fa parte della sua area cliccabile. Il margin sta fuori dal bordo, è sempre trasparente e serve solo a separare l'elemento dagli altri. I margin verticali tra blocchi possono anche fondersi, mentre il padding non si fonde mai.
Perché il mio elemento è più largo della larghezza che ho impostato?
Con il box-sizing: content-box predefinito, width si applica solo al contenuto, e padding e bordo vengono aggiunti sopra. Un box di 300px con 20px di padding e un bordo di 2px viene renderizzato largo 344px. Passa a box-sizing: border-box e resta 300px, con il contenuto che si restringe per starci.
Quando si fondono i margin?
I margin superiore e inferiore dei box block nel flusso normale si fondono quando si toccano: tra elementi fratelli, e tra un genitore e il suo primo o ultimo figlio quando nessun bordo, padding o contenuto inline li separa. Vince il margin più grande. I margin non si fondono mai dentro contenitori flex o grid, né in orizzontale.
Qual è la differenza tra display: none e visibility: hidden?
display: none rimuove completamente l'elemento dal layout, quindi lo spazio si chiude e gli screen reader lo saltano. visibility: hidden mantiene lo spazio riservato ma non disegna nulla, e il contenuto è nascosto anche alle tecnologie assistive. opacity: 0 mantiene sia lo spazio sia la possibilità di essere cliccato o ricevere il focus.
Posso impostare la larghezza di un elemento inline?
No. Larghezza, altezza e margin verticali vengono ignorati su un semplice box inline come uno span. Il padding verticale viene disegnato ma non allontana le righe. Cambialo in inline-block, o rendi il genitore un contenitore flex, e quelle dimensioni iniziano ad applicarsi.
content-box contro border-box in numeri
Con content-box, la larghezza totale è uguale a width più il padding sinistro e destro più il bordo sinistro e destro. Il margin poi si aggiunge all'esterno. Questo era il comportamento originale del CSS ed è ancora il default del browser per la maggior parte degli elementi.
Con border-box, la larghezza che scrivi è misurata fino al bordo esterno del border. Padding e bordo riducono l'area del contenuto invece di ingrandire il box, così un layout a due colonne da 50% più 50% resta su una riga per quanto padding tu aggiunga.
Bordi oltre la semplice linea
La shorthand border accetta una larghezza, uno stile e un colore in qualsiasi ordine. Gli stili sono solid, dashed, dotted, double, groove, ridge, inset, outset, none e hidden. Un bordo con stile none ha larghezza zero qualunque larghezza tu abbia scritto, cosa che sorprende chi imposta solo border-width.
border-radius arrotonda gli angoli di bordo, sfondo e outline nei browser attuali. Un valore arrotonda tutti e quattro gli angoli; una barra imposta raggi orizzontali e verticali separati per angoli ellittici, e 50% su un quadrato lo trasforma in un cerchio.
Come display cambia il box
I box block iniziano su una nuova riga e si allargano per riempire il contenitore. I box inline scorrono dentro una riga di testo e ignorano larghezza e altezza. inline-block scorre come il testo ma accetta dimensioni e margin verticali, il che lo rende comodo per badge e pulsanti.
flex e grid rendono l'elemento un blocco all'esterno e un contenitore di layout all'interno. I loro figli smettono di comportarsi come block o inline e seguono invece le regole flex o grid, con gap disponibile per la spaziatura. contents rimuove il box stesso mantenendo i figli, ma ha una storia di bug di accessibilità, quindi testalo con uno screen reader prima di farci affidamento.
Margin o padding? Scegli in base al compito
Quale usare
Vuoi
Usa
Che il colore di sfondo copra lo spazio
Un'area di tocco più grande su un pulsante
Spazio tra due card separate
margin, o gap sul genitore
Un elemento spinto all'estremità di una riga flex
margin-left: auto
Un blocco a larghezza fissa centrato
margin-inline: auto
Spazio che non può mai fondersi con un vicino
padding, o gap
Margin collapsing, dal vivo
La prima coppia mostra due fratelli i cui margin di 24px e 40px si incontrano: lo spazio è 40px, non 64px. La seconda coppia sta in un contenitore flow-root, che impedisce ai margin di genitore e figlio di fondersi, e la terza usa flex, dove nulla si fonde.
Fusione tra fratelli e tra genitore e figlio
Modifica i margin e guarda gli spazi. Aggiungere padding-top: 1px al box esterno impedisce anche la fusione tra genitore e figlio.
Stili del bordo e raggio
Tutti gli otto stili di bordo visibili
groove, ridge, inset e outset ombreggiano il bordo per simulare profondità. Rendono al meglio a 4px o più.
Forme con il raggio: arrotondato, pillola, cerchio, ellisse
Un raggio enorme come 999px crea una pillola di qualsiasi lunghezza. 50% su un quadrato dà un cerchio.
Ogni valore di display sugli stessi tre elementi
Valori di display a confronto
Valore
Nuova riga?
Larghezza e altezza funzionano?
Uso tipico
Tailwind
Sì
Sì
Sezioni, paragrafi, card
No
No
Parole dentro una frase
No
Sì
Badge, pulsanti in una riga di testo
Sì
Sì
Righe o colonne di elementi
No
Sì
Un'icona e un'etichetta dentro il testo
Sì
Sì
Layout bidimensionali
No
Sì
Una piccola griglia che sta in una riga
Sì
Sì
Contiene float e margin dei figli
Box rimosso
Nessun box da dimensionare
Far entrare i figli nel layout del genitore
Rimosso dal layout
Non renderizzato
Nascondere completamente
block, inline, inline-block, flex e grid affiancati
Ogni riga contiene gli stessi tre span con width: 80px e padding. Solo inline ignora la larghezza.
display: none vs visibility: hidden vs opacity: 0
Tre modi per nascondere, a confronto
Proprietà
Mantiene il suo spazio?
Cliccabile o con focus?
Letto dagli screen reader?
Si può animare con transition?
display: none
No
No
No
Solo con allow-discrete nei browser più recenti
visibility: hidden
Sì
No
No
Sì, cambia alla fine o all'inizio
opacity: 0
Sì
Sì
Sì
Sì, in modo fluido
L'elemento centrale nascosto in tre modi
Nota lo spazio lasciato da visibility e opacity, e lo spazio chiuso con display: none.
Il reset border-box
Applica border-box ovunque
Gli pseudo-elementi sono inclusi perché sono anch'essi dei box. Il Preflight di Tailwind include già questa regola.
Equivalenti Tailwind
Utility del box model in Tailwind (scala di spaziatura predefinita, 1 unità = 0.25rem)
CSS
Tailwind
padding: 1rem
padding-inline: 1.5rem
margin-top: 2rem
margin-inline: auto
border-width: 1px / 2px
border / border-2
border-style: dashed
border-radius: 0.5rem
border-radius: 9999px
box-sizing: border-box / content-box
box-border / box-content
visibility: hidden
opacity: 0
Visualizzatore del box model
Livello del margin
Box renderizzato (bordo esterno del border)
Spazio occupato, margin compresi
Il giallo è il margin, la linea blu è il bordo, il verde è il padding, l'azzurro è il contenuto.