Establece la distancia por fuera del elemento a su contenedor.
El margen se puede establecer en cada lado:
- margin-top
- margin-right
- margin-bottom
- margin-left
Y tiene los siguientes valores:
- Auto: el navegador calcula el margen (puede usarse para centrar horizontalmente un elemento bloque)
- Longitud: especifica un margen en px, pt, cm, etc.
- %: especifica un margen en % con respecto al ancho del contenedor
- Inherit: especifica que el margen debe ser heredada de elemento padre
En algunos casos podría utilizar valores negativos, pero esto implicaría
que el elemento saliera de su contenedor (Ejemplo Propiedad margin con valores negativos)
Ejemplo
Si la propiedad margin tiene cuatro valores:
margin: 10px 50px 95px 200px;
significa que:
top margin es 10px
right margin es 50px
bottom margin es 95px
left margin es 200px
si la propiedad margin tiene tres valores
margin: 10px 50px 85px;
eignifica que:
top margin es 15px
right y left margins son 50px
bottom margin es 85px
si la propiedad margin tiene dos valores
margin: 25px 50px;
significa que
top and bottom margins son 25px
right and left margins son 50px
Si la propiedad margin tiene un valor
margin: 30px;
todos los margenes son de 30px
es decir todas las distancias externas de ese elemento con resppecto a su contenedor
Y si la propiedad margin tiene el valor auto, centrara lógicamente el div de su contenedor
Los márgenes verticales (margin-top y margin-bottom) sólo se
pueden aplicar a los elementos de bloque y las imágenes, mientras que los márgenes
laterales (margin-left y margin-right)se pueden aplicar a cualquier elemento
