Margen (margin)
Asigna un margen o espacio fuera del elemento. Se pueden aplicar de diferentes formas de acuerdo a las necesidades.
Margin con 1 valor
La propiedad abreviada 'margin' con un solo valor, distribuye el mismo valor de margen a los cuatro lados del elemento
Ejemplo:
Asignaremos un valor de 2em a los cuatro margenes del cuadro.
div {margin:2em;}
Margin con 2 valores
Si hay dos valores 'el primero se aplica a los márgenes superior e inferior'
y el segundo se aplica a los márgenes izquierdo y derecho'.
Ejemplo:
Aplicaremos un valor de 3em a los márgenes superior e inferior y
5em para el margen izquierdo y derecho.
div {margin:3em 5em;}
Margin con 3 valores
Si hay tres valores el primero se aplica al márgen superior, el segundo
a los márgenes izquierdo y derecho y el tercero al margen inferior.
Ejemplo:
Aplicaremos un valor de 2em al márgen superior, a los margenes izquierdo y derecho
asignaremos 4em y al margen inferior le damos un valor de 5em.
div {margin:2em 4em 5em;}
Margin con 4 valores
Si hay cuatro valores el primero se aplica al márgen superior, el segundo
al márgen derecho, el tercero al margen inferior, y el cuarto al margen izquierdo.
Ejemplo:
Aplicaremos un valor de 1em al márgen superior, 3em al derecho, cero al inferior y 7em
al izquierdo.
div {margin:1em 3em 0 7em;}
Asignando margenes por cada lado
En el
diseño web a veces deseamos asignarle valor solo a un lado
del cuadro y dejar las demás como están. Mediante las anteriores propiedades tambien se puede hacer dando valor cero al resto de margenes.
existen otras alternativas para hacerlo y los presentamos a continuación.
margin-top (margen superior)
Ejemplo:
Aplicaremos un valor de 1em al márgen superior.
h1 {margin-top:1em;}
margin-right (margen derecho)
Ejemplo:
Aplicaremos un valor de 5em al márgen derecho.
h1 {margin-right:5em;}
margin-bottom (margen inferior)
Ejemplo:
Aplicaremos un valor de 2em al márgen inferior.
h1 {margin-bottom:2em;}
margin-left (margen izquierdo)
Ejemplo:
Aplicaremos un valor de 2.5em al márgen izquierdo.
h1 {margin-left:2em;}
