W3.CSS Marginesy
Klasa w3-margin dodaje 16px margines do wszystkich stron elementu.
W3.Klasy marż CSS
W3.CSS zapewnia następujące klasy depozytów zabezpieczających:
| Klasa | Definiuje |
|---|---|
| w3-marża | Dodaje margines 16px do wszystkich boków elementu |
| w3-górny margines | Dodaje górny margines 16px do elementu |
| w3-marża-prawa | Dodaje prawy margines 16px do elementu |
| w3-dół-marża | Dodaje dolny margines 16px do elementu |
| w3-pozostawiony margines | Dodaje 16px lewy margines do elementu |
| w3-sekcji | Dodaje 16px górny i dolny margines do elementu |
Margines
Klasa w3-margin dodaje 16px margines do wszystkich stron elementu:
Klasa w3-margin dodaje 16px margines do wszystkich stron elementu.
Przykład
<div class="w3-container w3-margin">
<p>I have 16px margin on all sides.</p>
</div>
Marża górna
Klasa w3-margin-top dodaje 16px górny margines do elementu:
Klasa w3-margin-top dodaje 16px górny margines do elementu.
Przykład
<div class="w3-container w3-margin-top">
<p>I have 16px margin on the top.</p>
</div>
Margines dolny
Klasa w3-margin-bottom dodaje 16px dolny margines do elementu:
Klasa w3-margin-bottom dodaje do elementu 16px margines dolny .
Przykład
<div class="w3-container w3-margin-bottom">
<p>I have 16px margin on the bottom.</p>
</div>
Lewy margines
Klasa w3-margin-left dodaje 16px lewy margines do elementu:
Klasa w3-margin-left dodaje 16px lewy margines do elementu.
Przykład
<div class="w3-container w3-margin-left">
<p>I have 16px margin the left.</p>
</div>
Margines w prawo
Klasa w3-margin-right dodaje 16px prawy margines do elementu:
Klasa w3-margin-right dodaje 16px prawy margines do elementu.
Przykład
<div class="w3-container w3-margin-right">
<p>I have 16px margin the right.</p>
</div>
Sekcje
Wiele elementów HTML nie ma domyślnego górnego lub dolnego marginesu. Takie elementy będą wyświetlane bez marginesu między nimi:
Jestem niebieski
Jestem Zielony
Klasa sekcji w3 może być użyta do oddzielenia elementów.
Dodaje 16px górny i dolny margines do dowolnego elementu HTML:
Jestem niebieski
Jestem Zielony
Przykład
<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>