W3.CSS-Ränder
Die Klasse w3-margin fügt allen Seiten eines Elements einen Rand von 16 Pixel hinzu.
W3.CSS Margin-Klassen
W3.CSS bietet die folgenden Margin-Klassen:
| Klasse | Definiert |
|---|---|
| w3-Rand | Fügt allen Seiten eines Elements einen Rand von 16 Pixeln hinzu |
| w3-Rand-oben | Fügt einem Element einen oberen Rand von 16 Pixeln hinzu |
| w3-Rand-rechts | Fügt einem Element einen rechten Rand von 16 Pixeln hinzu |
| w3-Rand-unten | Fügt einem Element einen unteren Rand von 16 Pixeln hinzu |
| w3-Rand-links | Fügt einem Element einen linken Rand von 16 Pixeln hinzu |
| w3-Abschnitt | Fügt einem Element einen oberen und unteren Rand von 16 Pixeln hinzu |
Rand
Die w3-margin- Klasse fügt allen Seiten eines Elements einen 16px-Rand hinzu:
Die Klasse w3-margin fügt allen Seiten eines Elements einen Rand von 16 Pixel hinzu.
Beispiel
<div class="w3-container w3-margin">
<p>I have 16px margin on all sides.</p>
</div>
Rand oben
Die Klasse w3-margin-top fügt einem Element einen oberen Rand von 16 Pixeln hinzu:
Die Klasse w3-margin-top fügt einem Element einen oberen Rand von 16 Pixeln hinzu .
Beispiel
<div class="w3-container w3-margin-top">
<p>I have 16px margin on the top.</p>
</div>
Rand unten
Die Klasse w3-margin-bottom fügt einem Element einen unteren Rand von 16 Pixeln hinzu:
Die Klasse w3-margin-bottom fügt einem Element einen unteren Rand von 16 Pixeln hinzu .
Beispiel
<div class="w3-container w3-margin-bottom">
<p>I have 16px margin on the bottom.</p>
</div>
Rand links
Die Klasse w3-margin-left fügt einem Element einen linken Rand von 16 Pixeln hinzu:
Die Klasse w3-margin-left fügt einem Element einen linken Rand von 16 Pixeln hinzu.
Beispiel
<div class="w3-container w3-margin-left">
<p>I have 16px margin the left.</p>
</div>
Rand rechts
Die Klasse w3-margin-right fügt einem Element einen rechten Rand von 16 Pixeln hinzu:
Die Klasse w3-margin-right fügt einem Element einen rechten Rand von 16 Pixeln hinzu.
Beispiel
<div class="w3-container w3-margin-right">
<p>I have 16px margin the right.</p>
</div>
Abschnitte
Viele HTML-Elemente haben keinen standardmäßigen oberen oder unteren Rand. Solche Elemente werden ohne Rand dazwischen angezeigt:
Ich bin blau
Ich bin Grün
Die Klasse w3-section kann zum Trennen von Elementen verwendet werden.
Es fügt jedem HTML-Element einen oberen und unteren Rand von 16 Pixeln hinzu:
Ich bin blau
Ich bin Grün
Beispiel
<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>