Lección 10: 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
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;
}
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.
Actividad 2
Implementa la siguiente imagen en HTML.
Actividad 3
Implementa la siguiente imagen en HTML.
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 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.

- 1 café: Se mantiene el dominio durante 4 meses.
- 2 cafés: Se liquida 1 mes del Servidor Web.
- 3 cafés: Se paga 1 mes de Newsletter.
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios