CSS -marges
Marges word gebruik om ruimte rondom elemente te skep, buite enige gedefinieerde grense.
CSS-marges
Die CSS margin-eienskappe word gebruik om ruimte rondom elemente te skep, buite enige gedefinieerde grense.
Met CSS het jy volle beheer oor die marges. Daar is eienskappe vir die stel van die marge vir elke kant van 'n element (bo, regs, onder en links).
Marge - Individuele kante
CSS het eienskappe om die marge vir elke kant van 'n element te spesifiseer:
margin-topmargin-rightmargin-bottommargin-left
Al die marge-eienskappe kan die volgende waardes hê:
- outo - die blaaier bereken die marge
- lengte - spesifiseer 'n marge in px, pt, cm, ens.
- % - spesifiseer 'n marge in % van die breedte van die element wat bevat
- erf - spesifiseer dat die marge van die ouerelement geërf moet word
Wenk: Negatiewe waardes word toegelaat.
Voorbeeld
Stel verskillende kantlyne vir al vier kante van 'n <p>-element:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Marge - Snelskrif Eiendom
Om die kode te verkort, is dit moontlik om al die marge-eienskappe in een eiendom te spesifiseer.
Die margineiendom is 'n snelskrif-eiendom vir die volgende individuele marge-eiendomme:
margin-topmargin-rightmargin-bottommargin-left
So, hier is hoe dit werk:
As die margineiendom vier waardes het:
- marge: 25px 50px 75px 100px;
- boonste marge is 25px
- regterkantlyn is 50px
- onderste marge is 75px
- linkerkantlyn is 100px
Voorbeeld
Gebruik die marge snelskrif-eienskap met vier waardes:
p {
margin: 25px 50px 75px 100px;
}
As die margineiendom drie waardes het:
- marge: 25px 50px 75px;
- boonste marge is 25px
- regter- en linkerkantlyne is 50px
- onderste marge is 75px
Voorbeeld
Gebruik die marge snelskrif-eienskap met drie waardes:
p {
margin: 25px 50px 75px;
}
As die margineiendom twee waardes het:
- marge: 25px 50px;
- boonste en onderste kantlyne is 25px
- regter- en linkerkantlyne is 50px
Voorbeeld
Gebruik die marge snelskrif-eienskap met twee waardes:
p {
margin: 25px 50px;
}
As die margineiendom een waarde het:
- marge: 25px;
- al vier kantlyne is 25px
Voorbeeld
Gebruik die marge snelskrif-eienskap met een waarde:
p {
margin: 25px;
}
Die outomatiese waarde
Jy kan die marge-eienskap op stel autoom die element in sy houer horisontaal te sentreer.
Die element sal dan die gespesifiseerde breedte opneem, en die oorblywende spasie sal gelykop verdeel word tussen die linker- en regterkantlyne.
Voorbeeld
Gebruik kantlyn: outo:
div {
width: 300px;
margin:
auto;
border: 1px solid red;
}
Die erfwaarde
Hierdie voorbeeld laat die linkerkantlyn van die <p class="ex1">-element van die ouerelement (<div>) oorgeërf word:
Voorbeeld
Gebruik van die erfwaarde:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left:
inherit;
}