CSS
Márgenes

Sintaxis

• margen: <arriba & derecha & abajo & izquierda> ;
• margen: <arriba> , <izquierda y derecha> , <fondo> ;
• margen: <arriba y abajo> , <izquierda y derecha> ;
• margen: <top> , <right> , <bottom> , <left> ;
• margin-top: <top> ;
• margen derecho: <right> ;
• margen inferior: <bottom> ;
• margen izquierdo: <left> ;

Parámetros

Observaciones

Aplicar margen en un lado dado

Propiedades específicas de la dirección

CSS le permite especificar un lado dado para aplicar margen a. Las cuatro propiedades proporcionadas para este fin son:

• margin-left
• margin-right
• margin-top
• margin-bottom

El siguiente código aplicaría un margen de 30 píxeles al lado izquierdo de la división seleccionada. Ver resultado

HTML

<div id="myDiv"></div>

CSS

#myDiv {
    margin-left: 30px;
    height: 40px;
    width: 40px;
    background-color: red;
}

Especificando la dirección usando la propiedad abreviada

La propiedad de margin estándar se puede expandir para especificar diferentes anchos a cada lado de los elementos seleccionados. La sintaxis para hacer esto es la siguiente:

margin: <top> <right> <bottom> <left>;

El siguiente ejemplo aplica un margen de ancho cero en la parte superior del div, un margen de 10 píxeles en el lado derecho, un margen de 50 píxeles en el lado izquierdo y un margen de 100 píxeles en el lado izquierdo. Ver resultado

HTML

<div id="myDiv"></div>

CSS

#myDiv {
    margin: 0 10px 50px 100px;
    height: 40px;
    width: 40px;
    background-color: red;
}

Colapso de margen

Cuando dos márgenes se tocan verticalmente, se contraen. Cuando dos márgenes se tocan horizontalmente, no se colapsan.

Ejemplo de márgenes verticales adyacentes:

Considere los siguientes estilos y marcas:

div{
    margin: 10px;
}

<div>
    some content
</div>
<div>
    some more content
</div>

Estarán separados 10px ya que los márgenes verticales se colapsan sobre uno y otro. (El espaciado no será la suma de dos márgenes).

Ejemplo de márgenes horizontales adyacentes:

Considere los siguientes estilos y marcas:

span{
    margin: 10px;
}

<span>some</span><span>content</span>

Estarán separados 20px ya que los márgenes horizontales no se colapsan en uno y otro. (El espaciado será la suma de dos márgenes).

Superposición con diferentes tamaños.

.top{
    margin: 10px;
}
.bottom{
    margin: 15px;
}

<div class="top">
    some content
</div>
<div class="bottom">
    some more content
</div>

Estos elementos estarán separados 15px verticalmente. Los márgenes se superponen tanto como pueden, pero el margen más grande determinará el espacio entre los elementos.

Margen de superposición gotcha

.outer-top{
    margin: 10px;
}
.inner-top{
    margin: 15px;
}
.outer-bottom{
    margin: 20px;
}
.inner-bottom{
    margin: 25px;
}

<div class="outer-top">
    <div class="inner-top">
        some content
    </div>
</div>
<div class="outer-bottom">
    <div class="inner-bottom">
        some more content
    </div>
</div>

¿Cuál será el espacio entre los dos textos? (para ver la respuesta)

El espaciado será de 25px. Dado que los cuatro márgenes se tocan entre sí, se colapsarán, por lo que utilizarán el margen más grande de los cuatro.

Ahora, ¿qué pasa si agregamos algunos bordes a la marca de arriba.

div{
    border: 1px solid red;
}

¿Cuál será el espacio entre los dos textos? (para ver la respuesta)

El espacio será de 59px! Ahora solo los márgenes de .outer-top y .outer-bottom se tocan entre sí, y son los únicos márgenes colapsados. Los márgenes restantes están separados por los bordes. Así que tenemos 1px + 10px + 1px + 15px + 20px + 1px + 25px + 1px. (Los 1px son las fronteras ...)

Disminución de márgenes entre elementos padre e hijo:

HTML:

<h1>Title</h1>
<div>
  <p>Paragraph</p>
</div>

CSS

h1 {
  margin: 0;
  background: #cff;
}
div {
  margin: 50px 0 0 0;
  background: #cfc;
}
p {
  margin: 25px 0 0 0;
  background: #cf9;
}

En el ejemplo anterior, solo se aplica el margen más grande. Es posible que haya esperado que el párrafo esté ubicado a 60 px del h1 (ya que el elemento div tiene un margen superior de 40 px y la p tiene un margen superior de 20 px). Esto no sucede porque los márgenes se colapsan juntos para formar un margen.

Centrar horizontalmente los elementos en una página utilizando el margen.

Mientras el elemento sea un bloque y tenga un valor de ancho establecido explícitamente , los márgenes se pueden usar para centrar los elementos de bloque en una página horizontalmente.

Agregamos un valor de ancho que es menor que el ancho de la ventana y la propiedad automática de margen luego distribuye el espacio restante a la izquierda y la derecha:

#myDiv {
 width:80%;
 margin:0 auto;
}

En el ejemplo anterior, usamos la declaración de margin abreviado para establecer primero 0 en los valores de margen superior e inferior (aunque podría ser cualquier valor) y luego usamos auto para permitir que el navegador asigne el espacio automáticamente a los valores de margen izquierdo y derecho.

En el ejemplo anterior, el elemento #myDiv se establece en un 80% de ancho, lo que deja un 20% restante de uso. El navegador distribuye este valor a los lados restantes de modo que:

(100% - 80%) / 2 = 10%

Simplificación de propiedades de margen

p {
    margin:1px;                /* 1px margin in all directions */
    
    /*equals to:*/
    
    margin:1px 1px;
    
    /*equals to:*/
    
    margin:1px 1px 1px;
    
    /*equals to:*/
    
    margin:1px 1px 1px 1px;
}

Otro ejemplo:

p{
    margin:10px 15px;        /* 10px margin-top & bottom And 15px margin-right & left*/
    
    /*equals to:*/
    
    margin:10px 15px 10px 15px;
    
    /*equals to:*/
    
    margin:10px 15px 10px;
    /* margin left will be calculated from the margin right value (=15px) */
}

Márgenes negativos

El margen es una de las pocas propiedades CSS que se pueden establecer en valores negativos. Esta propiedad se puede utilizar para superponer elementos sin posicionamiento absoluto .

div{
  display: inline;
}

#over{
  margin-left: -20px;
}

<div>Base div</div>
<div id="over">Overlapping div</div>

Ejemplo 1:

Es obvio suponer que el valor porcentual de margen a margin-left y margin-right sería relativo a su elemento principal.

.parent {
    width : 500px;
    height: 300px;
}

.child {
    width : 100px;
    height: 100px;
    margin-left: 10%;  /* (parentWidth * 10/100) => 50px */
}

Pero ese no es el caso, cuando se trata de margin-top y margin-bottom . Ambas propiedades, en porcentajes, no son relativas a la altura del contenedor principal, sino al ancho del contenedor principal.

Asi que,

.parent {
    width : 500px;
    height: 300px;
}

.child {
    width : 100px;
    height: 100px;
    margin-left: 10%;  /* (parentWidth * 10/100) => 50px  */
    margin-top: 20%;   /* (parentWidth * 20/100) => 100px */
}