Lección 8: 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

¿Te ayudo?

  • 1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
  • 2 cafés: Respondo a una duda en los comentarios.
  • 4 cafés: Te corrijo una actividad y te envío feedback.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario