Marges W3.CSS
La classe w3-margin ajoute une marge de 16px à tous les côtés d'un élément.
Classes de marge W3.CSS
W3.CSS fournit les classes de marge suivantes :
| Classer | Définit |
|---|---|
| w3-marge | Ajoute une marge de 16px à tous les côtés d'un élément |
| w3-marge-haut | Ajoute une marge supérieure de 16 pixels à un élément |
| w3-marge-droite | Ajoute une marge droite de 16 pixels à un élément |
| w3-marge-bas | Ajoute une marge inférieure de 16 pixels à un élément |
| w3-marge-gauche | Ajoute une marge gauche de 16 pixels à un élément |
| w3-section | Ajoute une marge supérieure et inférieure de 16 pixels à un élément |
Marge
La classe w3-margin ajoute une marge de 16 pixels sur tous les côtés d'un élément :
La classe w3-margin ajoute une marge de 16px à tous les côtés d'un élément.
Exemple
<div class="w3-container w3-margin">
<p>I have 16px margin on all sides.</p>
</div>
Marge supérieure
La classe w3-margin-top ajoute une marge supérieure de 16 pixels à un élément :
La classe w3-margin-top ajoute une marge supérieure de 16 pixels à un élément.
Exemple
<div class="w3-container w3-margin-top">
<p>I have 16px margin on the top.</p>
</div>
Marge inférieure
La classe w3-margin-bottom ajoute une marge inférieure de 16 pixels à un élément :
La classe w3-margin-bottom ajoute une marge inférieure de 16 pixels à un élément.
Exemple
<div class="w3-container w3-margin-bottom">
<p>I have 16px margin on the bottom.</p>
</div>
Marge gauche
La classe w3-margin-left ajoute une marge gauche de 16 pixels à un élément :
La classe w3-margin-left ajoute une marge gauche de 16 pixels à un élément.
Exemple
<div class="w3-container w3-margin-left">
<p>I have 16px margin the left.</p>
</div>
Marge droite
La classe w3-margin-right ajoute une marge droite de 16 pixels à un élément :
La classe w3-margin-right ajoute une marge droite de 16 pixels à un élément.
Exemple
<div class="w3-container w3-margin-right">
<p>I have 16px margin the right.</p>
</div>
Sections
De nombreux éléments HTML n'ont pas de marge supérieure ou inférieure par défaut. Ces éléments s'afficheront sans marge entre eux :
Je suis bleu
je suis vert
La classe w3-section peut être utilisée pour séparer des éléments.
Il ajoute une marge supérieure et inférieure de 16 px à tout élément HTML :
Je suis bleu
je suis vert
Exemple
<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>