Lección 12: Margin | Curso CSS

Lección 12: Margin

Con los márgenes podemos añadir espacio entre los elementos. De hecho muchas etiquetas ya poseen un margen por defecto que podremos sobreescribir, como puede ser los encabezados (h1, h2…), párrafos (p), etc.

Disponemos estilos para especificar un lado, o incluso varios de golpe.

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-inline

Margin izquierda y derecha.

.elemento {
    margin-inline: 5rem;
}

Para aplicar un relleno diferente a cada lado, podemos utilizar la siguiente sintaxis:

.elemento {
    margin-inline: 5rem 1rem;
}

Siendo el primer valor el relleno izquierdo y el segundo el derecho.

margin-block

Margin superior e inferior.

.elemento {
    margin-block: 6rem;
}

Para aplicar un relleno diferente a cada lado, podemos utilizar la siguiente sintaxis:

.elemento {
    margin-block: 6rem 1rem;
}

Siendo el primer valor el relleno superior y el segundo el inferior.

margin

Nos permite definir varios lados en una solia línea, aunque es un poco más complejo de memorizar.

.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.

Actividad 1

Implementa la siguiente imagen en HTML.

Discurso

Actividad 2

Implementa la siguiente imagen en HTML.

Discurso

Actividad 3

Implementa la siguiente imagen en HTML.

Discurso

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?

Comprame un café
Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario