Márgenes en CSS

Hoy vamos a ver cómo funcionan los márgenes en CSS

Márgenes

La propiedad de margen define el espacio alrededor de un elemento HTML.

Los valores de la propiedad de margen no son heredados por los elementos internos.

Con CSS puedes especificar el valor margen para cada lado de un elemento:

  • margin – especifica una propiedad abreviada para establecer las propiedades de margen en una declaración.
  • margin-bottom – especifica el margen inferior de un elemento.
  • margin-top – especifica el margen superior de un elemento.
  • margin-left – especifica el margen izquierdo de un elemento.
  • margin-righ – especifica el margen derecho de un elemento.

Todas las propiedades de margen pueden tener los siguientes valores:

  • auto – el navegador calcula el margen.
  • length – especifica un margen en px, pt, cm, etc.
  • % – especifica un margen en% del ancho del elemento contenedor.
  • inherit – especifica que el margen debe heredarse del elemento primario.
  • Valores negativos – los valores negativos están permitidos.

Veamos un ejemplo.

Este elemento tiene márgenes distintos.

Si queremos, podemos utilizar la propiedad abreviada (Shorthand Property)

La propiedad abreviada nos permite especificar todas las propiedades de los márgenes en una sola propiedad.

Veamos algunos ejemplos.

  • margin: 30px 60px 90px 120px; Este ejemplo funciona así:
    • margen superior – tiene 30px
    • margen derecho – tiene 60px
    • margen inferior – 90px
    • margen izquierdo – 120px
  • margin: 30px 60px 90px;
    • margen superior – tiene 30px
    • márgenes derecho e izquierdo – tienen 60px
    • margen izquierdo – tiene 90px
  • margin: 30px 60px;
    • márgenes superior e inferior – tienen 30px
    • márgenes derecho e izquierdo – tienen 50px
  • margin: 30px;
    • todos los márgenes tienen 30px

Además de estos valores tenemos el valor auto. El valor auto centra horizontalmente el contenido dentro del elemento.

Este elemento tiene 200px de ancho y está centrado con respecto a su elemento superior.

 

Recuerda que puedes asignarle margen a muchos elementos HTML.

  • body
  • h1
  • p
  • div

entre otros.

Prueba con distintos márgenes para darle importancia a distintos textos, títulos, etc.

También puedes cambiar las propiedades de los colores, fondos, fuentes y textos entre otros.

¿Qué te pareció el artículo? ¿Vas a implementarlo?

Deja un comentario