Proprietà margine CSS
Esempio
Imposta il margine per tutti e quattro i lati di un elemento <p> su 35 pixel:
p {
margin: 35px;
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La margin
proprietà imposta i margini per un elemento ed è una proprietà abbreviata per le seguenti proprietà:
Se la proprietà margin ha quattro valori:
- margine: 10px 5px 15px 20px;
- il margine superiore è 10px
- il margine destro è 5px
- il margine inferiore è 15px
- il margine sinistro è 20px
Se la proprietà margin ha tre valori:
- margine: 10px 5px 15px;
- il margine superiore è 10px
- i margini destro e sinistro sono 5px
- il margine inferiore è 15px
Se la proprietà margin ha due valori:
- margine: 10px 5px;
- i margini superiore e inferiore sono 10px
- i margini destro e sinistro sono 5px
Se la proprietà margin ha un valore:
- margine: 10px;
- tutti e quattro i margini sono 10px
Nota: sono ammessi valori negativi.
Valore di default: | 0 |
---|---|
Ereditato: | no |
Animabile: | sì, vedere le singole proprietà . Leggi su animabile |
Versione: | CSS1 |
sintassi JavaScript: | oggetto .style.margin="100px 50px" |
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
Property | |||||
---|---|---|---|---|---|
margin | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
Sintassi CSS
margin: length|auto|initial|inherit;
Valori di proprietà
Value | Description | Play it |
---|---|---|
length | Specifies a margin in px, pt, cm, etc. Default value is 0. Negative values are allowed. Read about length units | |
% | Specifies a margin in percent of the width of the containing element | |
auto | The browser calculates a margin | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Margine di collasso
I margini superiore e inferiore degli elementi a volte vengono compressi in un unico margine uguale al più grande dei due margini.
Questo non accade sui margini orizzontali (sinistro e destro)! Solo margini verticali (in alto e in basso)!
Guarda il seguente esempio:
Esempio
p.a {
margin: 30px 0;
}
p.b {
margin: 20px 0;
}
Nell'esempio sopra, l'elemento <p class="a"> ha un margine superiore e inferiore di 30px. L'elemento <p class="b"> ha un margine superiore e inferiore di 20px.
Ciò significa che il margine verticale tra <p class="a"> e <p class="b"> deve essere 50px (30px + 20px). Ma a causa del collasso del margine, il margine effettivo finisce per essere 30px!
Altri esempi
Esempio
Imposta il margine per un elemento <p> su 35 pixel in alto e in basso e su 70 pixel per destra e sinistra:
p {
margin: 35px 70px;
}
Esempio
Imposta il margine per un elemento <p> su 35 pixel per la parte superiore, 70 pixel per destra e sinistra e su 50 pixel per la parte inferiore:
p {
margin: 35px 70px 50px;
}
Esempio
Imposta il margine per un elemento <p> su 35 pixel per la parte superiore, 70 pixel per la destra, 50 pixel per la parte inferiore e su 90 pixel per la sinistra:
p {
margin: 35px 70px 50px 90px;
}
Pagine correlate
Tutorial CSS: margine CSS
Tutorial CSS: Modello CSS Box
Riferimento HTML DOM: proprietà margin