Lección 9: Margin

Añade espacio entre elementos de bloque.

margin-top

Margen superior.

.elemento {
    margin-top: 1rem;
}

margin-right

Margen derecha.

.elemento {
    margin-right: 2rem;
}

margin-bottom

Margen inferior.

.elemento {
    margin-bottom: 3rem;
}

margin-left

Margen izquierda.

.elemento {
    margin-left: 4rem;
}

margin

Resumida.

.elemento {

    /* Todos los lados */
    margin: 5rem;

    /* 
    Arriba y abajo: 6rem
    Derecha e izquierda: 1rem
    */
    margin: 6rem 1rem;
    
    /* 
    Arriba: 6rem
    Derecha e izquierda: 3rem
    Abajo: 1rem
    */
    margin: 6rem 3rem 1rem;

    /* 
    Arriba: 1rem
    Derecha: 2rem
    Abajo: 3rem
    Izquierda: 4rem
    */
    margin: 1rem 2rem 3rem 4rem;

}

Más información

A pesar que puedas usar margin: 0 auto para centrar un elemento de bloque en horizontal, en navegadores modernos debes utilizar display: flex; justify-content: center; sobre su elemento padre.

8-1 8-2 8-3

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se paga 1 mes de servidor.
  • 3 cafés: Se cubre 1 mes de Black box.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario