CSS -marge Eiendom
Voorbeeld
Stel die kantlyn vir al vier kante van 'n <p>-element op 35 piksels:
p {
margin: 35px;
}
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die margin
eienskap stel die marges vir 'n element, en is 'n snelskrif-eienskap vir die volgende eienskappe:
As die marge-eienskap vier waardes het:
- marge: 10px 5px 15px 20px;
- boonste marge is 10px
- regterkantlyn is 5px
- onderste marge is 15px
- linkerkantlyn is 20px
As die marge-eienskap drie waardes het:
- marge: 10px 5px 15px;
- boonste marge is 10px
- regter- en linkerkantlyne is 5px
- onderste marge is 15px
As die marge-eienskap twee waardes het:
- marge: 10px 5px;
- boonste en onderste kantlyne is 10px
- regter- en linkerkantlyne is 5px
As die marge-eienskap een waarde het:
- marge: 10px;
- al vier kantlyne is 10px
Let wel: Negatiewe waardes word toegelaat.
Standaard waarde: | 0 |
---|---|
Geërf: | geen |
Animateerbaar: | ja, sien individuele eiendomme . Lees oor animeerbaar |
Weergawe: | CSS1 |
JavaScript-sintaksis: | voorwerp .style.margin="100px 50px" |
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
Property | |||||
---|---|---|---|---|---|
margin | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
CSS-sintaksis
margin: length|auto|initial|inherit;
Eiendomswaardes
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 |
Marge ineenstort
Boonste en onderste marges van elemente word soms in 'n enkele marge inmekaargevou wat gelyk is aan die grootste van die twee kantlyne.
Dit gebeur nie op horisontale (links en regter) kantlyne nie! Slegs vertikale (bo en onder) marges!
Kyk na die volgende voorbeeld:
Voorbeeld
p.a {
margin: 30px 0;
}
p.b {
margin: 20px 0;
}
In die voorbeeld hierbo het die <p class="a">-element 'n boonste en onderste marge van 30px. Die <p class="b">-element het 'n boonste en onderste kantlyn van 20px.
Dit beteken dat die vertikale marge tussen <p class="a"> en <p class="b"> 50px (30px + 20px) moet wees. Maar as gevolg van ineenstorting van die marge, is die werklike marge uiteindelik 30 px!
Meer voorbeelde
Voorbeeld
Stel die kantlyn vir 'n <p>-element op 35 pixels vir bo en onder, en op 70 pixels vir regs en links:
p {
margin: 35px 70px;
}
Voorbeeld
Stel die kantlyn vir 'n <p>-element op 35 pixels vir bo, 70 pixels vir regs en links, en na 50 pixels vir onder:
p {
margin: 35px 70px 50px;
}
Voorbeeld
Stel die kantlyn vir 'n <p>-element op 35 pixels vir bo, 70 pixels vir regs, 50 pixels vir onder en na 90 pixels vir links:
p {
margin: 35px 70px 50px 90px;
}
Verwante bladsye
CSS handleiding: CSS Marge
CSS handleiding: CSS Box Model
HTML DOM verwysing: marge eiendom