Margens W3.CSS
A classe w3-margin adiciona uma margem de 16px a todos os lados de um elemento.
Classes de margem W3.CSS
W3.CSS fornece as seguintes classes de margem:
| Classe | Define |
|---|---|
| w3-margem | Adiciona uma margem de 16px a todos os lados de um elemento |
| w3-margin-top | Adiciona uma margem superior de 16px a um elemento |
| w3-margin-right | Adiciona uma margem direita de 16px a um elemento |
| w3-margin-bottom | Adiciona uma margem inferior de 16px a um elemento |
| w3-margin-left | Adiciona uma margem esquerda de 16px a um elemento |
| w3-seção | Adiciona uma margem superior e inferior de 16px a um elemento |
Margem
A classe w3-margin adiciona uma margem de 16px a todos os lados de um elemento:
A classe w3-margin adiciona uma margem de 16px a todos os lados de um elemento.
Exemplo
<div class="w3-container w3-margin">
<p>I have 16px margin on all sides.</p>
</div>
Margem Superior
A classe w3-margin-top adiciona uma margem superior de 16px a um elemento:
A classe w3-margin-top adiciona uma margem superior de 16px a um elemento.
Exemplo
<div class="w3-container w3-margin-top">
<p>I have 16px margin on the top.</p>
</div>
Margem Inferior
A classe w3-margin-bottom adiciona uma margem inferior de 16px a um elemento:
A classe w3-margin-bottom adiciona uma margem inferior de 16px a um elemento.
Exemplo
<div class="w3-container w3-margin-bottom">
<p>I have 16px margin on the bottom.</p>
</div>
Margem Esquerda
A classe w3-margin-left adiciona uma margem esquerda de 16px a um elemento:
A classe w3-margin-left adiciona uma margem esquerda de 16px a um elemento.
Exemplo
<div class="w3-container w3-margin-left">
<p>I have 16px margin the left.</p>
</div>
Margem direita
A classe w3-margin-right adiciona uma margem direita de 16px a um elemento:
A classe w3-margin-right adiciona uma margem direita de 16px a um elemento.
Exemplo
<div class="w3-container w3-margin-right">
<p>I have 16px margin the right.</p>
</div>
Seções
Muitos elementos HTML não têm uma margem superior ou inferior padrão. Esses elementos serão exibidos sem margem entre eles:
eu sou azul
eu sou verde
A classe w3-section pode ser usada para separar elementos.
Ele adiciona margem superior e inferior de 16px a qualquer elemento HTML:
eu sou azul
eu sou verde
Exemplo
<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>