Margenes CSS

Propiedades de Márgenes CSS

La propiedad margin de CSS es usada para generar espacios alrededor de un elemento. 

Márgenes CSS

La propiedad margin establece el tamaño del espacio en blanco alrededor del borde.

Nota: Los márgenes son completamente transparente y no puede un color de fondo.

Con CSS, se tiene el control total de los márgenes. Hay propiedades CSS para establecer el margen para cada lado de un elemento (superior, derecho, inferior e izquierdo).

Márgenes - Lados Individuales

CSS tiene propiedades para especificar el margen para cada lado de un elemento HTML.

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

Todos las propiedades de los márgenes pueden tener los siguientes valores:

  • auto - el navegador calcula el margen.
  • longitud - especifica un margen en px, pt, cm, etc.
  • % - especifica que el margen en porcentaje de el ancho del elemento que lo contiene.
  • inherit - especifica que el margen debe heredar los valores del elemento padre.

Nota: También es posible usar valores negativos para los márgenes, como para solapar contenido.

El siguiente ejemplo especifica diferente margen para cada uno de los cuatro lados de un elemento <p>.

p{
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

El siguiente ejemplo especifica el margen izquierdo para que herede el valor del elemento padre:

div.contenedor {
  border: 1px solid red;
  margin-left: 100px;
}
p.one{
  margin-left: inherit;
}

Márgenes - Propiedad Abreviada

Para acortar el código, es posible especificar todas las propiedades del margen en una sola propiedad. La propiedad margin es una propiedad abreviada para las siguientes propiedades individuales:

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

Ejemplo:

p {
  margin: 100px 150px 100px 80px;
}

Aquí como funciona:

Si la propiedad margin tiene cuatro valores:

  • margin: 25px 50px 75px 100px;
    • El margen superior es de 25px.
    • El margen derecho es de 50px.
    • El margen inferior es de 75px.
    • El margen izquierdo es de 100px.

Si la propiedad margin tiene tres valores:

  • margin: 25px 50px 75px;
    • El margen superior es de 25px.
    • El margen derecho e izquierdo son de 50px.
    • El margen inferior es de 75px.

Si la propiedad margin tiene dos valores:

  • margin: 25px 50px;
    • El margen superior e inferior son de 25px.
    • El margen derecho e izquierdo son de 50px.

Si la propiedad margin tiene un solo valor:

  • margin: 25px;
    • Todos los márgenes son de 25px.

Uso del valor auto

Tu puedes establecer la propiedad margin en auto para centrar horizontal el elemento en su contenedor. El elemento tomara el ancho especificado, y el espacio restante se divide en partes iguales entre los márgenes izquierdo y derecho.

Ejemplo:

div{
  width: 300px;
  margin: auto;
  border: 1px solid red;
}