Proprietà margine superiore CSS
Esempio
Imposta il margine superiore per un elemento <p> su 25 pixel:
p.ex1 {
margin-top: 25px;
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La margin-top
proprietà imposta il margine superiore di un elemento.
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.marginTop="100px" |
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
Property | |||||
---|---|---|---|---|---|
margin-top | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
Sintassi CSS
margin-top: length|auto|initial|inherit;
Valori di proprietà
Value | Description | Play it |
---|---|---|
length | Specifies a fixed top margin in px, pt, cm, etc. Default value is 0px. Negative values are allowed. Read about length units | |
% | Specifies a top margin in percent of the width of the containing element | |
auto | The browser calculates a top 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 superiore per un elemento <p> al 10% della larghezza del contenitore:
p.ex1 {
margin-top: 10%;
}
Esempio
Imposta il margine superiore per un elemento <p> su 2 em:
p.ex1 {
margin-top: 2em;
}
Pagine correlate
Tutorial CSS: margine CSS
Riferimento HTML DOM: proprietà marginTop