W3.CSS Marges
Die w3-marge klas voeg 16px marge by aan alle kante van 'n element.
W3.CSS Marge Klasse
W3.CSS verskaf die volgende margeklasse:
| Klas | Definieer |
|---|---|
| w3-marge | Voeg 'n 16px-marge by aan alle kante van 'n element |
| w3-marge-top | Voeg 'n 16px boonste marge by 'n element |
| w3-marge-regs | Voeg 'n 16px regterkantlyn by 'n element |
| w3-marge-bottom | Voeg 'n 16px onderste marge by 'n element |
| w3-marge-links | Voeg 'n 16px linkerkantlyn by 'n element |
| w3-afdeling | Voeg 'n 16px boonste en onderste kantlyn by 'n element |
Marge
Die w3-marge- klas voeg 'n 16px-marge by aan alle kante van 'n element:
Die w3-marge klas voeg 16px marge by aan alle kante van 'n element.
Voorbeeld
<div class="w3-container w3-margin">
<p>I have 16px margin on all sides.</p>
</div>
Marge Top
Die w3-marge-top- klas voeg 'n 16px boonste marge by 'n element:
Die w3-marge-top- klas voeg 'n 16px boonste marge by 'n element.
Voorbeeld
<div class="w3-container w3-margin-top">
<p>I have 16px margin on the top.</p>
</div>
Marge onder
Die w3-margin-bottom- klas voeg 'n 16px onderste marge by 'n element:
Die w3-marge-bottom- klas voeg 'n 16px onderste marge by 'n element.
Voorbeeld
<div class="w3-container w3-margin-bottom">
<p>I have 16px margin on the bottom.</p>
</div>
Marge links
Die w3-margin-left- klas voeg 'n 16px linkerkantlyn by 'n element:
Die w3-margin-left- klas voeg 'n 16px linkerkantlyn by 'n element.
Voorbeeld
<div class="w3-container w3-margin-left">
<p>I have 16px margin the left.</p>
</div>
Marge regs
Die w3-margin-right- klas voeg 'n 16px regtermarge by 'n element:
Die w3-marge-right- klas voeg 'n 16px regterkantlyn by 'n element.
Voorbeeld
<div class="w3-container w3-margin-right">
<p>I have 16px margin the right.</p>
</div>
Seksies
Baie HTML-elemente het nie 'n verstek boonste of onderste kantlyn nie. Sulke elemente sal sonder 'n marge tussen hulle vertoon word:
Ek is Blou
Ek is Groen
Die w3-seksieklas kan gebruik word om elemente te skei.
Dit voeg 16px boonste en onderste marge by enige HTML-element:
Ek is Blou
Ek is Groen
Voorbeeld
<div class="w3-container w3-section w3-blue">
<h1>I am
Blue</h1>
</div>
<div class="w3-container
w3-section
w3-green">
<h1>I am Green</h1>
</div>