Márgenes W3.CSS
La clase w3-margin agrega un margen de 16px a todos los lados de un elemento.
Clases de margen W3.CSS
W3.CSS proporciona las siguientes clases de margen:
| Clase | define |
|---|---|
| margen w3 | Agrega un margen de 16px a todos los lados de un elemento |
| w3-margen-superior | Agrega un margen superior de 16px a un elemento |
| w3-margen-derecho | Agrega un margen derecho de 16px a un elemento |
| w3-margen-inferior | Agrega un margen inferior de 16px a un elemento |
| w3-margen-izquierda | Agrega un margen izquierdo de 16px a un elemento |
| w3-sección | Agrega un margen superior e inferior de 16px a un elemento |
Margen
La clase w3-margin agrega un margen de 16px a todos los lados de un elemento:
La clase w3-margin agrega un margen de 16px a todos los lados de un elemento.
Ejemplo
<div class="w3-container w3-margin">
<p>I have 16px margin on all sides.</p>
</div>
Margen superior
La clase w3-margin-top agrega un margen superior de 16px a un elemento:
La clase w3-margin-top agrega un margen superior de 16px a un elemento.
Ejemplo
<div class="w3-container w3-margin-top">
<p>I have 16px margin on the top.</p>
</div>
Margen inferior
La clase w3-margin-bottom agrega un margen inferior de 16px a un elemento:
La clase w3-margin-bottom agrega un margen inferior de 16px a un elemento.
Ejemplo
<div class="w3-container w3-margin-bottom">
<p>I have 16px margin on the bottom.</p>
</div>
margen izquierdo
La clase w3-margin-left agrega un margen izquierdo de 16px a un elemento:
La clase w3-margin-left agrega un margen izquierdo de 16px a un elemento.
Ejemplo
<div class="w3-container w3-margin-left">
<p>I have 16px margin the left.</p>
</div>
Margen derecho
La clase w3-margin-right agrega un margen derecho de 16px a un elemento:
La clase w3-margin-right agrega un margen derecho de 16px a un elemento.
Ejemplo
<div class="w3-container w3-margin-right">
<p>I have 16px margin the right.</p>
</div>
Secciones
Muchos elementos HTML no tienen un margen superior o inferior predeterminado. Dichos elementos se mostrarán sin un margen entre ellos:
Soy azul
yo soy verde
La clase w3-section se puede utilizar para separar elementos.
Agrega un margen superior e inferior de 16px a cualquier elemento HTML:
Soy azul
yo soy verde
Ejemplo
<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>