Teoría
Teoría

Márgenes: la propiedad margin

La propiedad margin define los márgenes de un bloque: el espacio exterior que separa el borde del elemento de los límites de su elemento padre o de los elementos vecinos.

Para definir el margen de cada lado, usa las propiedades margin-top, margin-right, margin-bottom y margin-left:

Márgenes

La propiedad abreviada margin funciona como padding, pero define espacios exteriores en lugar de interiores:

margin: 10px;
margin: 5px 10px;
margin: 5px 10px 15px;
margin: 5px 10px 15px 20px;

El mismo margen en todos los lados.
5px arriba y abajo, 10px a la derecha y a la izquierda.
5px arriba, 10px a la izquierda y a la derecha, 15px abajo.
Los márgenes superior, derecho, inferior e izquierdo, respectivamente.

Las cajas en línea solo responden a los márgenes horizontales.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Márgenes: la propiedad margin</title> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="out"> <div class="m1">Bloque 1</div> <div class="m2">Bloque 2</div> <div class="m3">Bloque 3</div> </div> <div class="out"> <span class="m1">Texto 1</span> <br/> <span class="m2">Texto 2</span> <br/> <span class="m3">Texto 3</span> <br/> </div> </body> </html>

CSS

.out { width: 280px; margin: 20px; } .m1 { } .m2 { } .m3 { }

ObjetivosRealizado

Añade la propiedad margin a las siguientes reglas CSS:

Para la clase m1: margin: 10px;.
Para la clase m2: margin: 10px 20px;.
Para la clase m3: margin: 10px 20px 30px;.

Observa cómo se comportan los elementos en línea.