Margini W3.CSS
La classe w3-margin aggiunge un margine di 16px a tutti i lati di un elemento.
Classi di margine W3.CSS
W3.CSS fornisce le seguenti classi di margine:
| Classe | Definisce |
|---|---|
| margine w3 | Aggiunge un margine di 16px a tutti i lati di un elemento |
| w3-margine-alto | Aggiunge un margine superiore di 16px a un elemento |
| w3-margine-destra | Aggiunge un margine destro di 16px a un elemento |
| w3-margine-basso | Aggiunge un margine inferiore di 16px a un elemento |
| w3-margine-sinistra | Aggiunge un margine sinistro di 16px a un elemento |
| w3-sezione | Aggiunge un margine superiore e inferiore di 16px a un elemento |
Margine
La classe w3-margin aggiunge un margine di 16px a tutti i lati di un elemento:
La classe w3-margin aggiunge un margine di 16px a tutti i lati di un elemento.
Esempio
<div class="w3-container w3-margin">
<p>I have 16px margin on all sides.</p>
</div>
Margine superiore
La classe w3-margin-top aggiunge un margine superiore di 16px a un elemento:
La classe w3-margin-top aggiunge un margine superiore di 16px a un elemento.
Esempio
<div class="w3-container w3-margin-top">
<p>I have 16px margin on the top.</p>
</div>
Margine inferiore
La classe w3-margin-bottom aggiunge un margine inferiore di 16px a un elemento:
La classe w3-margin-bottom aggiunge un margine inferiore di 16px a un elemento.
Esempio
<div class="w3-container w3-margin-bottom">
<p>I have 16px margin on the bottom.</p>
</div>
Margine sinistro
La classe w3-margin-left aggiunge un margine sinistro di 16px a un elemento:
La classe w3-margin-left aggiunge un margine sinistro di 16px a un elemento.
Esempio
<div class="w3-container w3-margin-left">
<p>I have 16px margin the left.</p>
</div>
Margine a destra
La classe w3-margin-right aggiunge un margine destro di 16px a un elemento:
La classe w3-margin-right aggiunge un margine destro di 16px a un elemento.
Esempio
<div class="w3-container w3-margin-right">
<p>I have 16px margin the right.</p>
</div>
Sezioni
Molti elementi HTML non hanno un margine superiore o inferiore predefinito. Tali elementi verranno visualizzati senza margine tra di loro:
Io sono blu
Sono Verde
La classe w3-section può essere utilizzata per separare gli elementi.
Aggiunge 16px di margine superiore e inferiore a qualsiasi elemento HTML:
Io sono blu
Sono Verde
Esempio
<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>