Comprendere width, height, margin e padding
Imparate come width, height, margin e padding definiscono le dimensioni e la spaziatura degli elementi.
Comprendere width, height, margin e padding è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 1 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 concetto del modello a riquadri
Ogni elemento HTML viene visualizzato come un riquadro rettangolare. Il box model CSS descrive i quattro livelli che compongono questo riquadro dall'interno verso l'esterno: content → padding → border → margin.
width e height
width e height impostano le dimensioni dell'area del contenuto. Per impostazione predefinita, padding e border vengono aggiunti a queste dimensioni.
<div class="box"></div>
padding
padding è lo spazio trasparente interno al bordo, tra il contenuto e il bordo. Fa parte dell'area dell'elemento su cui è possibile fare clic e su cui viene dipinto lo sfondo.
<div class="card">Card content</div>
Forme estese di padding
Ogni lato può essere impostato singolarmente:
<div class="element">Padded element</div>
margin
margin è lo spazio trasparente esterno al bordo. Allontana gli altri elementi. I margini negativi avvicinano gli elementi o li fanno sovrapporre.
<div class="section">Centered section with bottom margin</div>
Collasso dei margini
I margini verticali collassano tra elementi a blocchi adiacenti: lo spazio effettivo è pari al maggiore dei due margini, non alla loro somma. I margini orizzontali non collassano mai.
<h2>Heading</h2>
<p>Paragraph below — margins collapse to 30px, not 50px.</p>
Prevenire il collasso dei margini
Il collasso dei margini viene impedito quando:
- gli elementi sono figli flex o grid
- un elemento padre ha
overflow: hidden - un elemento padre ha del
paddingtra sé e il primo figlio - un elemento in linea separa gli elementi fratelli
Margini auto
Impostare i margini orizzontali su auto per un elemento a blocchi con larghezza fissa lo centra all'interno del contenitore. È la tecnica classica per centrare un elemento.
<div class="centered">Centered block, max 800px wide</div>
min-width max-width min-height max-height
Limiti le dimensioni con valori minimi e massimi per mantenere gli elementi leggibili su schermi di diverse dimensioni:
<div class="content">Readable content column capped at 65 characters wide.</div>
Calcolare le dimensioni totali di un elemento
Nel modello content-box predefinito, la larghezza totale = width + padding-left + padding-right + border-left + border-right. Questo comportamento può essere sorprendente ed è il motivo per cui si preferisce border-box.
Proprietà logiche per margini e padding
CSS moderno offre equivalenti logici: margin-block, margin-inline, padding-block-start e così via. Questi si adattano automaticamente alla direzione di scrittura.
<div class="card">Logical padding-block/inline</div>
Verifica rapida
Quali livelli sono inclusi nella larghezza totale visualizzata di un elemento a blocchi nel modello a riquadri predefinito?
Riepilogo
I livelli del box model sono content, padding, border e margin. Il padding è interno al bordo, mentre il margin è esterno. I margini verticali collassano tra elementi fratelli adiacenti. Utilizzi margin: 0 auto con una larghezza fissa per centrare gli elementi a blocchi.
Domande Frequenti
La lezione «Comprendere width, height, margin e padding» è gratuita?
Sì — il testo completo di «Comprendere width, height, margin e padding» è 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 «Comprendere width, height, margin e padding»?
Imparate come width, height, margin e padding definiscono le dimensioni e la spaziatura degli elementi. 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 1 di 4.
Quanto tempo richiede la lezione «Comprendere width, height, margin e padding»?
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