Márgenes con CSS

Las propiedades CSS margin se utilizan para crear espacio alrededor de los elementos, fuera de los bordes definidos. Con CSS, tienes control total sobre los márgenes. Hay propiedades para establecer el margen de cada lado de un elemento (superior, derecho, inferior e izquierdo).

margin – lados individuales

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

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

Todas las propiedades margin tienen los siguientes valores:

  • auto: el navegador calcula el margen
  • largo: especifica un margen en px, pt, cm, etc.
  • %: especifica un margen en % del ancho del elemento contenedor
  • inherit: especifica que el margen debe ser heredado del elemento padre

Ejm

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

margin – propiedad abreviada

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

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

Ejm

  • margin: 25px 50px 75px 100px;
    • top margin is 25px
    • right margin is 50px
    • bottom margin is 75px
    • left margin is 100px

Ejm

p {
  margin: 25px 50px 75px 100px;
}

Si la propiedad margin tiene 3 valores, el primer valor será para el margen de arriba, el segundo valor para los márgenes laterales, y el tercer valor para el margen de abajo.

Ejm

p {
  margin: 25px 50px 75px;
}

Si la propiedad margin presenta 2 valores, el primer valor será para los márgenes de arriba y abajo, y el segundo valor, para los márgenes laterales.

Ejm

p {
  margin: 25px 50px;
}

Por último, si la propiedad margin tiene un único valor, este será para todos los márgenes.

El valor auto

Puedes establecer la propiedad margin=»auto» para centrar horizontalmente el elemento dentro de su contenedor. El elemento ocupará entonces el ancho especificado y el espacio restante se dividirá por igual entre los márgenes izquierdo y derecho.

Ejm

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

El valor inherit

Este ejemplo permite que el margen izquierdo del elemento <p class=»ex1″> se herede del elemento principal (<div>).

Ejm

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

margin collapse

Los márgenes superior e inferior de los elementos a veces se contraen en un solo margen que es igual al mayor de los dos márgenes. ¡Esto no sucede en los márgenes izquierdo y derecho! ¡Solo márgenes superior e inferior!

Ejm

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}

En el ejemplo anterior, el elemento <h1> tiene un margen inferior de 50 px y el elemento <h2> tiene un margen superior establecido en 20 px.

El sentido común parecería sugerir que el margen vertical entre <h1> y <h2> sería un total de 70px (50px + 20px). Pero debido al colapso del margen, el margen real termina siendo 50 px.