W3.CSS Okraje
Třída w3-margin přidává okraj 16px na všechny strany prvku.
Třídy marže W3.CSS
W3.CSS poskytuje následující třídy marží:
| Třída | Definuje |
|---|---|
| w3-marže | Přidá okraj 16px na všechny strany prvku |
| w3-margin-top | Přidá k prvku horní okraj o velikosti 16 pixelů |
| w3-margin-right | Přidá k prvku pravý okraj o velikosti 16 pixelů |
| w3-margin-bottom | Přidá k prvku spodní okraj o velikosti 16 pixelů |
| w3-margin-left | Přidá k prvku levý okraj o velikosti 16 pixelů |
| w3-sekce | Přidá k prvku horní a dolní okraj o velikosti 16 pixelů |
Okraj
Třída w3-margin přidává okraj 16px na všechny strany prvku:
Třída w3-margin přidává okraj 16px na všechny strany prvku.
Příklad
<div class="w3-container w3-margin">
<p>I have 16px margin on all sides.</p>
</div>
Margin Top
Třída w3-margin-top přidá k prvku horní okraj 16px:
Třída w3-margin-top přidává k prvku horní okraj 16px.
Příklad
<div class="w3-container w3-margin-top">
<p>I have 16px margin on the top.</p>
</div>
Dolní okraj
Třída w3-margin-bottom přidá k prvku spodní okraj o velikosti 16 pixelů:
Třída w3-margin-bottom přidá k prvku spodní okraj o velikosti 16 pixelů.
Příklad
<div class="w3-container w3-margin-bottom">
<p>I have 16px margin on the bottom.</p>
</div>
Levý okraj
Třída w3-margin-left přidá k prvku levý okraj 16px:
Třída w3-margin-left přidá k prvku levý okraj 16px.
Příklad
<div class="w3-container w3-margin-left">
<p>I have 16px margin the left.</p>
</div>
Okraj vpravo
Třída w3-margin-right přidá k prvku pravý okraj 16px:
Třída w3-margin-right přidává k prvku pravý okraj 16px.
Příklad
<div class="w3-container w3-margin-right">
<p>I have 16px margin the right.</p>
</div>
Sekce
Mnoho prvků HTML nemá výchozí horní nebo dolní okraj. Tyto prvky se zobrazí bez okraje mezi nimi:
Jsem modrý
Jsem Zelený
Třídu w3-section lze použít k oddělení prvků.
Přidá 16px horní a spodní okraj k jakémukoli prvku HTML:
Jsem modrý
Jsem Zelený
Příklad
<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>