CSS Fogli Di Stile

Proprietà Per Margini E Spazi Interni

Stampa WhatsApp Email

Margin e padding: spazio esterno e interno, singoli lati, proprietà abbreviate, centratura e collasso dei margini, con esempi visivi.

Prerequisiti: sintassi CSS, classi, bordi e dimensioni dei riquadri.

Margini e spazi interni: margin e padding

Per rendere una pagina ordinata dobbiamo controllare sia la distanza tra gli elementi sia quella tra il contenuto e il suo bordo. Le proprietà principali sono margin e padding.

Dall’esterno verso l’interno:

MARGINE → BORDO → PADDING → CONTENUTO
ProprietàDove agisceLo sfondo dell’elemento la colora?
marginFuori dal bordo.No.
paddingTra il bordo e il contenuto.Sì, con il normale background-clip: border-box.

Come leggere le anteprime

  • Giallo: sfondo del contenitore, visibile nello spazio esterno al riquadro.
  • Bordo blu: confine del riquadro.
  • Azzurro: sfondo del riquadro, compreso lo spazio interno.
  • Contorno verde tratteggiato: confine del contenuto, per riconoscere il padding.

Negli esempi il contenitore usa display: flow-root;, che impedisce il collasso dei margini dei suoi figli con il contenitore. In questo modo possiamo osservare chiaramente il margine superiore e inferiore. L’altezza dei riquadri si adatta al contenuto.

1. Il margine esterno

Margin crea spazio fuori dal bordo. In queste anteprime lo spazio esterno lascia vedere il fondo giallo del contenitore.

1. Il margine esterno: esempi e risultati
Proprietà o sintassiDescrizioneEsempio HTML e CSSRisultato
marginCon un solo valore imposta lo stesso margine sui quattro lati. Il margine non viene colorato dallo sfondo dell’elemento.HTML
<div class="contenitore">
    <div class="riquadro">
        <div class="contenuto">Questo è il contenuto.</div>
    </div>
</div>
CSS
.contenitore {
    display: flow-root;
    width: 280px;
    background-color: #fff0d1;
    border: 1px dashed #b76b00;
}

.riquadro {
    background-color: #dceeff;
    border: 2px solid #17365d;
    color: #17365d;
}

.riquadro {
    margin: 20px;
}

.contenuto {
    outline: 1px dashed #357c62;
}

Il riquadro è distanziato di 20 pixel dai bordi del contenitore.

margin-topImposta il margine superiore.HTML
<div class="contenitore">
    <div class="riquadro">
        <div class="contenuto">Questo è il contenuto.</div>
    </div>
</div>
CSS
.contenitore {
    display: flow-root;
    width: 280px;
    background-color: #fff0d1;
    border: 1px dashed #b76b00;
}

.riquadro {
    background-color: #dceeff;
    border: 2px solid #17365d;
    color: #17365d;
}

.riquadro {
    margin-top: 25px;
}

.contenuto {
    outline: 1px dashed #357c62;
}

Compare spazio sopra al riquadro.

margin-rightImposta il margine destro. In questo esempio il riquadro è un blocco con larghezza automatica: il margine riduce lo spazio disponibile per la sua larghezza.HTML
<div class="contenitore">
    <div class="riquadro">
        <div class="contenuto">Questo è il contenuto.</div>
    </div>
</div>
CSS
.contenitore {
    display: flow-root;
    width: 280px;
    background-color: #fff0d1;
    border: 1px dashed #b76b00;
}

.riquadro {
    background-color: #dceeff;
    border: 2px solid #17365d;
    color: #17365d;
}

.riquadro {
    margin-right: 30px;
}

.contenuto {
    outline: 1px dashed #357c62;
}

Rimane una fascia gialla di 30 pixel a destra.

margin-bottomImposta il margine inferiore.HTML
<div class="contenitore">
    <div class="riquadro">
        <div class="contenuto">Questo è il contenuto.</div>
    </div>
</div>
CSS
.contenitore {
    display: flow-root;
    width: 280px;
    background-color: #fff0d1;
    border: 1px dashed #b76b00;
}

.riquadro {
    background-color: #dceeff;
    border: 2px solid #17365d;
    color: #17365d;
}

.riquadro {
    margin-bottom: 25px;
}

.contenuto {
    outline: 1px dashed #357c62;
}

Compare spazio sotto al riquadro.

margin-leftImposta il margine sinistro.HTML
<div class="contenitore">
    <div class="riquadro">
        <div class="contenuto">Questo è il contenuto.</div>
    </div>
</div>
CSS
.contenitore {
    display: flow-root;
    width: 280px;
    background-color: #fff0d1;
    border: 1px dashed #b76b00;
}

.riquadro {
    background-color: #dceeff;
    border: 2px solid #17365d;
    color: #17365d;
}

.riquadro {
    margin-left: 30px;
}

.contenuto {
    outline: 1px dashed #357c62;
}

Il riquadro inizia 30 pixel più a destra.

margin: 0Azzera i margini. È utile anche per rimuovere i margini predefiniti di elementi come titoli e paragrafi.HTML
<div class="contenitore">
    <div class="riquadro">
        <div class="contenuto">Questo è il contenuto.</div>
    </div>
</div>
CSS
.contenitore {
    display: flow-root;
    width: 280px;
    background-color: #fff0d1;
    border: 1px dashed #b76b00;
}

.riquadro {
    background-color: #dceeff;
    border: 2px solid #17365d;
    color: #17365d;
}

.riquadro {
    margin: 0;
}

.contenuto {
    outline: 1px dashed #357c62;
}

Non c’è spazio esterno assegnato al riquadro. Il suo bordo è vicino a quello del contenitore.

2. Lo spazio interno

Padding crea spazio tra il contenuto e il bordo. Il fondo azzurro del riquadro si estende anche sotto il padding.

2. Lo spazio interno: esempi e risultati
Proprietà o sintassiDescrizioneEsempio HTML e CSSRisultato
paddingCon un solo valore assegna lo stesso spazio interno ai quattro lati. Non accetta valori negativi né auto.HTML
<div class="contenitore">
    <div class="riquadro">
        <div class="contenuto">Questo è il contenuto.</div>
    </div>
</div>
CSS
.contenitore {
    display: flow-root;
    width: 280px;
    background-color: #fff0d1;
    border: 1px dashed #b76b00;
}

.riquadro {
    background-color: #dceeff;
    border: 2px solid #17365d;
    color: #17365d;
}

.riquadro {
    padding: 20px;
}

.contenuto {
    outline: 1px dashed #357c62;
}

Il testo è separato dal bordo da 20 pixel di spazio interno.

padding-topImposta lo spazio interno superiore.HTML
<div class="contenitore">
    <div class="riquadro">
        <div class="contenuto">Questo è il contenuto.</div>
    </div>
</div>
CSS
.contenitore {
    display: flow-root;
    width: 280px;
    background-color: #fff0d1;
    border: 1px dashed #b76b00;
}

.riquadro {
    background-color: #dceeff;
    border: 2px solid #17365d;
    color: #17365d;
}

.riquadro {
    padding-top: 25px;
}

.contenuto {
    outline: 1px dashed #357c62;
}

Compare spazio azzurro sopra al testo.

padding-rightImposta lo spazio interno destro. Per osservarlo, confronta il bordo con il riquadro tratteggiato del contenuto.HTML
<div class="contenitore">
    <div class="riquadro">
        <div class="contenuto">Questo è il contenuto.</div>
    </div>
</div>
CSS
.contenitore {
    display: flow-root;
    width: 280px;
    background-color: #fff0d1;
    border: 1px dashed #b76b00;
}

.riquadro {
    background-color: #dceeff;
    border: 2px solid #17365d;
    color: #17365d;
}

.riquadro {
    padding-right: 30px;
}

.contenuto {
    outline: 1px dashed #357c62;
}

Il contenuto termina 30 pixel prima del bordo destro.

padding-bottomImposta lo spazio interno inferiore.HTML
<div class="contenitore">
    <div class="riquadro">
        <div class="contenuto">Questo è il contenuto.</div>
    </div>
</div>
CSS
.contenitore {
    display: flow-root;
    width: 280px;
    background-color: #fff0d1;
    border: 1px dashed #b76b00;
}

.riquadro {
    background-color: #dceeff;
    border: 2px solid #17365d;
    color: #17365d;
}

.riquadro {
    padding-bottom: 25px;
}

.contenuto {
    outline: 1px dashed #357c62;
}

Compare spazio azzurro sotto al testo.

padding-leftImposta lo spazio interno sinistro.HTML
<div class="contenitore">
    <div class="riquadro">
        <div class="contenuto">Questo è il contenuto.</div>
    </div>
</div>
CSS
.contenitore {
    display: flow-root;
    width: 280px;
    background-color: #fff0d1;
    border: 1px dashed #b76b00;
}

.riquadro {
    background-color: #dceeff;
    border: 2px solid #17365d;
    color: #17365d;
}

.riquadro {
    padding-left: 30px;
}

.contenuto {
    outline: 1px dashed #357c62;
}

Il testo inizia 30 pixel dopo il bordo sinistro.

margin e padding insiemeLe due proprietà si combinano: una separa il riquadro dall’esterno, l’altra separa il contenuto dal bordo.HTML
<div class="contenitore">
    <div class="riquadro">
        <div class="contenuto">Questo è il contenuto.</div>
    </div>
</div>
CSS
.contenitore {
    display: flow-root;
    width: 280px;
    background-color: #fff0d1;
    border: 1px dashed #b76b00;
}

.riquadro {
    background-color: #dceeff;
    border: 2px solid #17365d;
    color: #17365d;
}

.riquadro {
    margin: 15px;
    padding: 20px;
}

.contenuto {
    outline: 1px dashed #357c62;
}

La fascia gialla esterna corrisponde al margine; lo spazio azzurro interno corrisponde al padding.

3. Le proprietà abbreviate

Margin e padding possono ricevere da uno a quattro valori. La distribuzione è identica per entrambe le proprietà.

3. Le proprietà abbreviate: esempi e risultati
Proprietà o sintassiDescrizioneEsempio HTML e CSSRisultato
Due valoriIl primo valore riguarda sopra e sotto; il secondo destra e sinistra.HTML
<div class="contenitore">
    <div class="riquadro">
        <div class="contenuto">Questo è il contenuto.</div>
    </div>
</div>
CSS
.contenitore {
    display: flow-root;
    width: 280px;
    background-color: #fff0d1;
    border: 1px dashed #b76b00;
}

.riquadro {
    background-color: #dceeff;
    border: 2px solid #17365d;
    color: #17365d;
}

.riquadro {
    padding: 10px 30px;
}

.contenuto {
    outline: 1px dashed #357c62;
}

10 pixel di spazio interno verticale e 30 pixel di spazio interno orizzontale.

Tre valoriIl primo riguarda sopra, il secondo destra e sinistra, il terzo sotto.HTML
<div class="contenitore">
    <div class="riquadro">
        <div class="contenuto">Questo è il contenuto.</div>
    </div>
</div>
CSS
.contenitore {
    display: flow-root;
    width: 280px;
    background-color: #fff0d1;
    border: 1px dashed #b76b00;
}

.riquadro {
    background-color: #dceeff;
    border: 2px solid #17365d;
    color: #17365d;
}

.riquadro {
    padding: 10px 25px 35px;
}

.contenuto {
    outline: 1px dashed #357c62;
}

10 pixel sopra, 25 sui lati e 35 sotto.

Quattro valoriL’ordine è alto, destra, basso, sinistra: si parte dall’alto e si procede in senso orario.HTML
<div class="contenitore">
    <div class="riquadro">
        <div class="contenuto">Questo è il contenuto.</div>
    </div>
</div>
CSS
.contenitore {
    display: flow-root;
    width: 280px;
    background-color: #fff0d1;
    border: 1px dashed #b76b00;
}

.riquadro {
    background-color: #dceeff;
    border: 2px solid #17365d;
    color: #17365d;
}

.riquadro {
    padding: 10px 20px 30px 40px;
}

.contenuto {
    outline: 1px dashed #357c62;
}

Ogni lato ha uno spazio diverso. Il padding sinistro è il maggiore.

Margini con due valoriLa stessa distribuzione vale per lo spazio esterno.HTML
<div class="contenitore">
    <div class="riquadro">
        <div class="contenuto">Questo è il contenuto.</div>
    </div>
</div>
CSS
.contenitore {
    display: flow-root;
    width: 280px;
    background-color: #fff0d1;
    border: 1px dashed #b76b00;
}

.riquadro {
    background-color: #dceeff;
    border: 2px solid #17365d;
    color: #17365d;
}

.riquadro {
    margin: 15px 30px;
}

.contenuto {
    outline: 1px dashed #357c62;
}

15 pixel di margine sopra e sotto, 30 a destra e a sinistra.

4. Spaziature logiche

Le proprietà logiche seguono la direzione di scrittura anziché indicare sempre alto, destra, basso e sinistra. Nella normale scrittura orizzontale italiana, inline corrisponde all’asse orizzontale e block a quello verticale.

4. Spaziature logiche: esempi e risultati
Proprietà o sintassiDescrizioneEsempio HTML e CSSRisultato
margin-inlineImposta i margini ai due estremi dell’asse in linea. Con un valore li rende uguali.HTML
<div class="contenitore">
    <div class="riquadro">
        <div class="contenuto">Questo è il contenuto.</div>
    </div>
</div>
CSS
.contenitore {
    display: flow-root;
    width: 280px;
    background-color: #fff0d1;
    border: 1px dashed #b76b00;
}

.riquadro {
    background-color: #dceeff;
    border: 2px solid #17365d;
    color: #17365d;
}

.riquadro {
    margin-inline: 25px;
}

.contenuto {
    outline: 1px dashed #357c62;
}

Nella scrittura orizzontale, compaiono 25 pixel di margine a sinistra e a destra.

margin-blockImposta i margini ai due estremi dell’asse dei blocchi.HTML
<div class="contenitore">
    <div class="riquadro">
        <div class="contenuto">Questo è il contenuto.</div>
    </div>
</div>
CSS
.contenitore {
    display: flow-root;
    width: 280px;
    background-color: #fff0d1;
    border: 1px dashed #b76b00;
}

.riquadro {
    background-color: #dceeff;
    border: 2px solid #17365d;
    color: #17365d;
}

.riquadro {
    margin-block: 20px;
}

.contenuto {
    outline: 1px dashed #357c62;
}

Nella scrittura orizzontale, compaiono 20 pixel di margine sopra e sotto.

padding-inlineImposta lo spazio interno sull’asse in linea.HTML
<div class="contenitore">
    <div class="riquadro">
        <div class="contenuto">Questo è il contenuto.</div>
    </div>
</div>
CSS
.contenitore {
    display: flow-root;
    width: 280px;
    background-color: #fff0d1;
    border: 1px dashed #b76b00;
}

.riquadro {
    background-color: #dceeff;
    border: 2px solid #17365d;
    color: #17365d;
}

.riquadro {
    padding-inline: 25px;
}

.contenuto {
    outline: 1px dashed #357c62;
}

Nella scrittura orizzontale, ci sono 25 pixel di spazio interno a sinistra e a destra.

padding-blockImposta lo spazio interno sull’asse dei blocchi.HTML
<div class="contenitore">
    <div class="riquadro">
        <div class="contenuto">Questo è il contenuto.</div>
    </div>
</div>
CSS
.contenitore {
    display: flow-root;
    width: 280px;
    background-color: #fff0d1;
    border: 1px dashed #b76b00;
}

.riquadro {
    background-color: #dceeff;
    border: 2px solid #17365d;
    color: #17365d;
}

.riquadro {
    padding-block: 20px;
}

.contenuto {
    outline: 1px dashed #357c62;
}

Nella scrittura orizzontale, ci sono 20 pixel di spazio interno sopra e sotto.

5. Centrare un riquadro con margin: auto

Nel normale flusso dei blocchi, un riquadro con una larghezza inferiore a quella del contenitore può essere centrato orizzontalmente usando margini laterali automatici. Lo spazio disponibile viene distribuito a destra e a sinistra.

HTML

<div class="contenitore"><div class="riquadro">Un riquadro centrato.</div></div>

CSS

.contenitore {
    width: 280px;
    border: 1px dashed #b76b00;
    background-color: #fff0d1;
}

.riquadro {
    width: 180px;
    box-sizing: border-box;
    margin: 20px auto;
    padding: 15px;
    border: 2px solid #17365d;
    background-color: #dceeff;
}

Risultato

Auto non significa sempre centrato: l’effetto dipende dal layout. Nel normale flusso dei blocchi, margin: auto non centra verticalmente. Un blocco con larghezza automatica può occupare già tutto lo spazio e non avere spazio laterale da distribuire.

6. Dimensioni e box-sizing

Padding e bordo influenzano le dimensioni. Margin è sempre esterno e non è compreso nella larghezza impostata con width.

ImpostazioneDichiarazioniLarghezza del riquadro, esclusi i margini
content-boxwidth: 200px;
padding: 20px;
border: 2px solid;		244 pixel: 200 di contenuto + 40 di padding + 4 di bordo.
border-boxwidth: 200px;
padding: 20px;
border: 2px solid;
box-sizing: border-box;		200 pixel complessivi. Lo spazio del contenuto è 156 pixel.

Con 15 pixel di margine a destra e a sinistra, si aggiungono altri 30 pixel allo spazio orizzontale richiesto. Se si aumenta il padding mantenendo una larghezza fissa con border-box, diminuisce lo spazio disponibile per il contenuto.

7. Il collasso dei margini verticali

Nel normale flusso dei blocchi, alcuni margini verticali adiacenti si combinano anziché sommarsi. Questo comportamento si chiama collasso dei margini. Per due margini positivi, lo spazio risultante corrisponde al maggiore.

HTML

<div class="contenitore"><div class="primo">Primo riquadro</div><div class="secondo">Secondo riquadro</div></div>

CSS

.contenitore {
    width: 280px;
    border: 1px dashed #b76b00;
    background-color: #fff0d1;
}

.primo, .secondo {
    padding: 10px;
    border: 2px solid #17365d;
    background-color: #dceeff;
}

.primo {
    margin-bottom: 30px;
}

.secondo {
    margin-top: 20px;
}

Risultato

La distanza tra i due bordi è 30 pixel, non 50.

Il collasso può coinvolgere anche genitore e primo o ultimo figlio, quando non ci sono separazioni come bordo o padding sul lato interessato e sono soddisfatte le altre condizioni. I margini orizzontali non collassano; il padding non collassa mai. I margini degli elementi flex e grid non collassano tra loro.

Se il contenitore usa display: flow-root, i margini dei figli non collassano con quelli del contenitore. Questo non impedisce il collasso tra due fratelli che rimangono nel normale flusso dei blocchi.

Margini negativi

Margin accetta anche valori negativi, mentre padding no. I margini negativi possono avvicinare o sovrapporre elementi: l’effetto preciso dipende dal lato e dal contesto. Non equivalgono a position o transform.

.riquadro {
    margin-top: -10px;
}

Nel normale flusso un margine superiore negativo può portare il riquadro più vicino al contenuto precedente. Quando margini verticali negativi collassano con quelli positivi, non vale più la semplice regola del maggiore: al maggiore positivo si somma il negativo con valore assoluto maggiore.

Le percentuali

Nel comune layout a blocchi con scrittura orizzontale, le percentuali di margin e padding, anche per i lati superiore e inferiore, sono calcolate rispetto alla larghezza del blocco di riferimento, non alla sua altezza.

.riquadro {
    padding: 10%;
}

Se il blocco di riferimento è largo 300 pixel, il padding è di 30 pixel su ciascun lato. Per iniziare è spesso più semplice usare px o rem e osservare il risultato.

8. Spazio tra elementi: quando usare gap

In un contenitore Flexbox o Grid, gap imposta lo spazio tra gli elementi senza assegnare un margine a ciascuno. Non aggiunge, da solo, spazio lungo il bordo esterno del contenitore: per quello possiamo usare padding.

HTML

<div class="elenco"><div>Uno</div><div>Due</div><div>Tre</div></div>

CSS

.elenco {
    display: flex;
    gap: 15px;
    padding: 20px;
    background-color: #fff0d1;
}

.elenco > div {
    padding: 10px;
    border: 2px solid #17365d;
    background-color: #dceeff;
}

Risultato

I riquadri sono distanti 15 pixel tra loro. Il contenitore ha 20 pixel di spazio interno lungo i suoi bordi.

Indicazioni pratiche

  • Usa padding per evitare che il testo tocchi il bordo di una scheda o di un pulsante.
  • Usa margin per separare un elemento dal contenuto circostante.
  • Usa gap per distanziare elementi di un contenitore flex o grid.
  • Controlla i margini predefiniti di body, titoli e paragrafi quando compaiono spazi inattesi.
  • Una proprietà abbreviata reimposta tutti i lati: margin: 0 scritto dopo margin-left: 20px azzera anche il margine sinistro.
  • Sugli elementi inline non sostituiti, come un normale span, i margini verticali non separano le righe. Anche il padding verticale non aumenta automaticamente l’altezza della riga e può sovrapporsi al contenuto vicino. Valuta inline-block quando serve un riquadro con dimensioni e spaziature proprie.