Box-sizing: content-box e border-box
Comprendete come box-sizing modifica il calcolo di width e height includendo padding e border.
Box-sizing: content-box e border-box è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Il problema di box-sizing
Per impostazione predefinita, CSS imposta width solo sull'area del contenuto. L'aggiunta di padding o border aumenta le dimensioni effettive visualizzate dell'elemento, creando confusione e possibili errori.
<div class="box">200px + padding + border = 244px rendered</div>
content-box (Predefinito)
box-sizing: content-box è l'impostazione predefinita. width e height si applicano esclusivamente al contenuto. Padding e bordo vengono aggiunti sopra, facendo crescere l'elemento oltre le dimensioni impostate.
border-box
Con box-sizing: border-box, width e height includono contenuto + padding + bordo. L'elemento mantiene esattamente le dimensioni dichiarate, indipendentemente da padding o bordo.
<div class="box">Exactly 200px rendered width</div>
Il reset universale con border-box
Applichi border-box globalmente utilizzando il reset universalmente consigliato:
<div class="demo-box">Width stays exactly 200px</div>
Perché inherit invece di *
Un pattern alternativo consente ai componenti di sovrascrivere box-sizing quando necessario:
<div class="demo-box">Inherited border-box sizing</div>
Larghezza percentuale + padding
Il principale vantaggio pratico di border-box riguarda le larghezze percentuali. Un elemento con width: 50% e 20px di padding rimane esattamente al 50% del genitore, senza overflow.
<div class="col">50% wide column with padding, no overflow</div>
border-box non include margin
Anche con border-box, margin non è incluso nella larghezza dichiarata. I margini aggiungono sempre spazio all'esterno dell'elemento, oltre alle dimensioni impostate.
Storia: perché content-box è l'impostazione predefinita
Storicamente, i browser adottavano modelli di box diversi. Il W3C ha standardizzato content-box, mentre IE utilizzava border-box. Il CSS moderno usa content-box come impostazione predefinita per conformarsi al W3C, ma praticamente tutti i progetti lo sovrascrivono con border-box.
Ispezionare il box model negli strumenti per sviluppatori
In Chrome DevTools, il pannello Elements mostra un diagramma del box model con le dimensioni esatte di contenuto, padding, bordo e margine. È il modo più rapido per eseguire il debug dei problemi di dimensionamento.
Grid e Flexbox usano internamente border-box
CSS Grid e Flexbox dimensionano sempre tracce ed elementi usando la semantica di border-box, indipendentemente dall'impostazione box-sizing dell'elemento. In questo modo i calcoli delle dimensioni rimangono prevedibili.
min/max con border-box
min-width, max-width, min-height e max-height funzionano come width: includono padding e bordo quando border-box è attivo.
Verifica rapida
Con box-sizing: border-box, un elemento dichiarato come width: 300px; padding: 30px; ha un'area del contenuto larga:
Riepilogo
box-sizing: border-box include padding e bordo nella larghezza dichiarata, impedendo una crescita imprevista delle dimensioni. Lo applichi globalmente con *, *::before, *::after { box-sizing: border-box }. I margini non sono mai inclusi in nessuno dei due modelli di box.
Domande Frequenti
La lezione «Box-sizing: content-box e border-box» è gratuita?
Sì — il testo completo di «Box-sizing: content-box e border-box» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Box-sizing: content-box e border-box»?
Comprendete come box-sizing modifica il calcolo di width e height includendo padding e border. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Box-sizing: content-box e border-box»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Comprendere width, height, margin e padding
- Stili, larghezza e colore dei bordi
- Box-sizing: content-box e border-box
- Outline e box-shadow