La marginproprietà definisce la parte più esterna del box model, creando spazio attorno a un elemento, al di fuori dei bordi definiti.
I margini vengono impostati utilizzando lunghezze, percentuali o la parola chiave autoe possono avere valori negativi. Ecco un esempio:
.box ( margin: 0 3em 0 3em; )margin è una proprietà abbreviata e accetta fino a quattro valori, mostrati qui:
.box ( margin: || || || )Se vengono impostati meno di quattro valori, i valori mancanti vengono presunti in base a quelli definiti. Ad esempio, le due serie di regole seguenti otterrebbero risultati identici:
.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )Pertanto, se viene definito un solo valore, vengono impostati tutti e quattro i margini sullo stesso valore. Se vengono dichiarati tre valori, lo è margin: (top) (left-and-right) (bottom);.
Qualsiasi singolo margine può essere dichiarato usando il longhand, nel qual caso definiresti un solo valore per proprietà:
.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )auto e centratura
Ciascuna delle proprietà del margine può anche accettare un valore di auto. Un valore di autofondamentalmente dice al browser di definire il margine per te. Nella maggior parte dei casi, un valore di autosarà equivalente a un valore di 0(che è il valore iniziale per ciascuna proprietà margin) oppure qualsiasi spazio disponibile su quel lato dell'elemento. Tuttavia, autoè utile per il centraggio orizzontale:
.container ( width: 980px; margin: 0 auto; )In questo esempio, vengono eseguite due operazioni per centrare questo elemento orizzontalmente nello spazio disponibile:
- All'elemento viene assegnata una larghezza specificata
- I margini sinistro e destro sono impostati su
auto
Senza la larghezza specificata, i autovalori non avrebbero essenzialmente alcun effetto, impostando i margini sinistro e destro su 0oppure su qualunque sia lo spazio disponibile all'interno dell'elemento genitore.
Va anche sottolineato che autoè utile solo per il centraggio orizzontale, quindi l'utilizzo autoper i margini superiore e inferiore non centrerà un elemento verticalmente, il che può creare confusione per i principianti.
Margini collassanti
I margini verticali su elementi diversi che si toccano (quindi non hanno contenuto, spaziatura interna o bordi che li separano) collasseranno, formando un unico margine uguale al maggiore dei margini adiacenti. Ciò non accade sui margini orizzontali (sinistro e destro), ma solo verticali (superiore e inferiore).
Per illustrare, prendi il seguente codice HTML:
Collapsing Margins
Example text.E il seguente CSS:
h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )In questo esempio, h2all'elemento viene assegnato un margine inferiore di 20 px. L'elemento paragrafo, che lo segue immediatamente nella sorgente, ha un margine superiore impostato a 10px.
Il buon senso sembrerebbe suggerire che lo spessore del margine verticale tra il h2e il paragrafo sarebbe un totale di 30px (20px + 10px). Ma a causa del collasso del margine, lo spessore effettivo finisce per essere 20 px. Ciò è dimostrato nella penna incorporata di seguito:
Sebbene il collasso dei margini possa sembrare poco intuitivo a prima vista, in realtà sono utili per alcuni motivi. In primo luogo, impediscono agli elementi vuoti di aggiungere ulteriore spazio di margine verticale, solitamente indesiderabile.
In secondo luogo, consentono un approccio più coerente alla dichiarazione dei margini universali tra gli elementi della pagina. Ad esempio, i titoli hanno generalmente uno spazio sul margine verticale, così come i paragrafi. Se i margini non collassano, i titoli che seguono i paragrafi (o viceversa) richiedono spesso il ripristino dei margini su uno degli elementi per ottenere una quantità costante di spaziatura verticale.
Terzo, il collasso del margine si applica anche agli elementi nidificati. Guarda la seguente penna:
Qui, l'elemento paragrafo ha un margine superiore impostato a 30 px ed è nidificato all'interno di un divelemento con un margine superiore di 40 px. Inoltre, l' h2elemento ha un margine inferiore di 20 px.
Ancora una volta, il buon senso suggerirebbe che lo spazio totale del margine verticale qui sarebbe 90px (20px + 40px + 30px), ma invece i margini collassano tutti in un unico margine di 40px (il più alto dei tre). Ciò è utile nella maggior parte dei casi poiché non è necessario ridefinire nessuno dei margini superiori per rimuovere lo spazio verticale aggiuntivo.
Margini negativi
Come potresti sospettare, mentre un valore di margine positivo spinge via altri elementi, un margine negativo attira l'elemento stesso in quella direzione o attira altri elementi verso di esso.
Ecco un esempio di un contenitore con imbottitura e l'intestazione h2 ha margini negativi che si trascinano attraverso tale imbottitura fino ai bordi:
Vedi il
caso d'uso più comune della penna per i margini negativi di Chris Coyier (@chriscoyier)
su CodePen.
Ecco un esempio in cui il primo paragrafo ha un margine inferiore negativo, che spinge verso l'alto il paragrafo successivo.
Vedi il
margine negativo della penna che rimuove il paragrafo inferiore di Chris Coyier (@chriscoyier)
su CodePen.
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Lavori | Lavori | Lavori | Lavori | Lavori | Lavori | Lavori |
IE6 è soggetto al bug raddoppiato del margine mobile, che può essere risolto nella maggior parte dei casi aggiungendolo display: inlineall'elemento float.