Margen de CSS

El margen de este elemento es de 70px.

Pruebe usted mismo

Margen de CSS

CSS margen La propiedad se utiliza para crear espacio alrededor del elemento más allá de cualquier borde definido.

A través de CSS, puede controlar completamente el margen. Algunas propiedades se pueden usar para configurar el margen de cada lado (superior, derecho, inferior e izquierdo) del elemento.

Margen - Lado individual

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

  • margen-superior
  • margen-derecho
  • margen-inferior
  • margen-izquierdo

Todas las propiedades de margen pueden establecer los siguientes valores:

  • auto - El navegador calcula el margen
  • longitud - Especifica el margen en unidades como px, pt, cm, etc.
  • % - Especifica el margen en porcentaje de la anchura del elemento contenedor
  • inherit - Especifica que el margen debe ser heredado del elemento padre

Consejo:Permite valores negativos.

Ejemplo

Establezca diferentes márgenes para los cuatro lados del elemento <p>:

p {
  margen-superior: 100px;
  margen-inferior: 100px;
  margen-derecho: 150px;
  margen-izquierdo: 80px;
}

Pruebe usted mismo

Margen - Propiedad abreviada

Para reducir el código, se puede especificar todas las propiedades de márgenes en una sola propiedad.

margen La propiedad es una abreviatura de las siguientes propiedades de márgenes:

  • margen-superior
  • margen-derecho
  • margen-inferior
  • margen-izquierdo

El mecanismo de trabajo es el siguiente:

Si margen La propiedad tiene cuatro valores:

  • margen: 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

Ejemplo

La propiedad abreviada de margen configura cuatro valores:

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

Pruebe usted mismo

Si margen La propiedad estableció tres valores:

  • margen: 25px 50px 75px;
    • El margen superior es de 25px
    • Los márgenes laterales derecho e izquierdo son de 50px
    • El margen inferior es de 75px

Ejemplo

Utilice la propiedad abreviada de margen configurada con tres valores:

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

Pruebe usted mismo

Si margen La propiedad estableció dos valores:

  • margen: 25px 50px;
    • Los márgenes superior e inferior son de 25px
    • Los márgenes laterales derecho e izquierdo son de 50px

Ejemplo

Utilice la propiedad abreviada de margen configurada con dos valores:

p {
  margen: 25px 50px;
}

Pruebe usted mismo

Si margen La propiedad estableció un valor:

  • margen: 25px;
    • Todas las cuatro márgenes laterales son de 25px

Ejemplo

Utilice la propiedad abreviada de margen para establecer un valor:

p {
  margen: 25px;
}

Pruebe usted mismo

auto valor

Puede establecer la propiedad margin como auto, para que el elemento se centre horizontalmente en su contenedor.

Luego, el elemento ocupará el ancho especificado y el espacio restante se distribuirá uniformemente entre los bordes derecho e izquierdo.

Ejemplo

Uso margin: auto:

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

Pruebe usted mismo

Valor inherit

Este ejemplo hace que el margen exterior izquierdo del elemento <p class="ex1"> se herede del elemento padre (<div>):

Ejemplo

Uso de valor inherit:

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

Pruebe usted mismo

Lectura adicional

Libro de texto:Modelo de cuadro: Margen exterior CSS