El margen de un elemento es el espacio transparente situado alrededor del borde del elemento, independientemente de que el borde sea o no visible. El margen es la separación que hay entre el elemento y los elementos adyacentes (verticales u horizontales).
El margin se divide en cuatro segmentos: top (superior), bottom (inferior), left (izquierdo) y right (derecho). De este modo podemos distinguir margin-left, margin-right, margin-top y margin-bottom.
Sintaxis: margin-top: <valor> Valores posibles: <longitud> | <porcentaje> | auto Valor inicial: 0 Se aplica a: Todos los elementos Heredado: No
La propiedad margin-top establece el margen superior de un elemento especificando una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. Se permiten márgenes negativos.
Por ejemplo, la siguiente regla eliminaría el margen superior de un documento:
body { margin-top: 0 }
Sintaxis: margin-right: <valor> Valores posibles: <longitud> | <porcentaje> | auto Valor inicial: 0 Se aplica a: Todos los elementos Heredado: No
La propiedad margin-right establece el margen derecho de un elemento especificando una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. Se permiten márgenes negativos.
Por ejemplo:
p.estrecho { margin-right: 50% }
Sintaxis: margin-bottom: <valor> Valores posibles: <longitud> | <porcentaje> | auto Valor inicial: 0 Se aplica a: Todos los elementos Heredado: No
La propiedad margin-bottom establece el margen inferior de un elemento especificando una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. Se permiten márgenes negativos.
Sintaxis: margin-left: <valor> Valores posibles: <longitud> | <porcentaje> | auto Valor inicial: 0 Se aplica a: Todos los elementos Heredado: No
La propiedad margin-left establece el margen izquierdo de un elemento especificando una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. Se permiten márgenes negativos.
Sintaxis: margin: <valor> Valores posibles: <longitud> | <porcentaje> | auto Valor inicial: 0 Se aplica a: Todos los elementos Heredado: No
La propiedad margin establece los márgenes de un elemento especificando entre uno y cuatro valores, donde cada valor es una longitud, un porcentaje o auto. Los valores en porcentaje se refieren al ancho del elemento padre. Se permiten márgenes negativos.
En la propiedad margin se puede indicar de uno a cuatro valores, que se interpretan de la siguiente manera:
Por ejemplo:
p.tipo1 {margin: 2em} /* todos los márgenes en 2em */
p.tipo2 {margin: 1em 2em} /* top y bottom = 1em, right y left = 2em */
p.tipo3 {margin: 1em 2em 3em} /* top=1em, right=2em, bottom=3em, left=2em */
El ejemplo anterior es equivalente a:
p.tipo1 {
margin-top: 2em;
margin-right: 2em;
margin-bottom: 2em;
margin-left: 2em;
}
p.tipo2 {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 1em;
margin-left: 2em;
}
p.tipo3 {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em;
}
En CSS2 la expresión márgenes cerrados significa que los márgenes adyacentes (ningún área de relleno o de borde los separa) de dos o más cajas (que pueden estar una al lado de la otra o anidadas) se combinan para formar un solo margen.
En CSS2, los márgenes horizontales nunca se cierran.
Los los márgenes verticales pueden cerrarse entre ciertas cajas:
Por ejemplo: dos párrafos consecutivos con márgenes indicados se cerrarán de modo que el margen que se deja entre ellos es el máximo entre el inferior del primero y el superior del segundo.