W3.CSS-marges
De klasse w3-margin voegt 16px marge toe aan alle zijden van een element.
W3.CSS-margeklassen
W3.CSS biedt de volgende margeklassen:
| Klas | definieert |
|---|---|
| w3-marge | Voegt een marge van 16 px toe aan alle zijden van een element |
| w3-marge-top | Voegt een bovenmarge van 16 px toe aan een element |
| w3-marge-rechts | Voegt een 16px rechtermarge toe aan een element |
| w3-marge-onder | Voegt een ondermarge van 16 px toe aan een element |
| w3-marge-links | Voegt een linkermarge van 16 px toe aan een element |
| w3-sectie | Voegt een boven- en ondermarge van 16 px toe aan een element |
Marge
De klasse w3-margin voegt een marge van 16px toe aan alle zijden van een element:
De klasse w3-margin voegt 16px marge toe aan alle zijden van een element.
Voorbeeld
<div class="w3-container w3-margin">
<p>I have 16px margin on all sides.</p>
</div>
Marge boven
De klasse w3-margin-top voegt een bovenmarge van 16px toe aan een element:
De klasse w3-margin-top voegt een bovenmarge van 16px toe aan een element.
Voorbeeld
<div class="w3-container w3-margin-top">
<p>I have 16px margin on the top.</p>
</div>
Marge onder
De klasse w3-margin-bottom voegt een ondermarge van 16px toe aan een element:
De klasse w3-margin-bottom voegt een ondermarge van 16px toe aan een element.
Voorbeeld
<div class="w3-container w3-margin-bottom">
<p>I have 16px margin on the bottom.</p>
</div>
Marge links
De klasse w3-margin-left voegt een linkermarge van 16px toe aan een element:
De klasse w3-margin-left voegt een linkermarge van 16px toe aan een element.
Voorbeeld
<div class="w3-container w3-margin-left">
<p>I have 16px margin the left.</p>
</div>
Marge rechts
De klasse w3-margin-right voegt een rechtermarge van 16px toe aan een element:
De klasse w3-margin-right voegt een rechtermarge van 16px toe aan een element.
Voorbeeld
<div class="w3-container w3-margin-right">
<p>I have 16px margin the right.</p>
</div>
Secties
Veel HTML-elementen hebben geen standaard boven- of ondermarge. Dergelijke elementen worden weergegeven zonder een marge ertussen:
Ik ben blauw
ik ben groen
De klasse w3-sectie kan worden gebruikt om elementen te scheiden.
Het voegt 16px boven- en ondermarge toe aan elk HTML-element:
Ik ben blauw
ik ben 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>