Margen CSS

Tabla de contenido

    Mostrar tabla de contenidos

Los márgenes se utilizan para crear espacio alrededor de los elementos, fuera de los bordes definidos.

This element has a margin of 70px.

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 70px;
  border: 1px solid #4CAF50;
}
</style>
</head>
<body>

<h2>CSS Margins</h2>

<div>This element has a margin of 70px.</div>

</body>
</html>

Márgenes CSS

Las propiedades CSS margin se utilizan para crear espacio alrededor de los elementos, fuera de cualquier frontera definida.

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

Margen - Lados individuales

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

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

Todas las propiedades de margen pueden tener los siguientes valores:

  • auto - el navegador calcula el margen

  • longitud: especifica un margen en px, pt, cm, etc.

  • %: especifica un margen en % del ancho del elemento contenedor

  • heredar: especifica que el margen debe heredarse del elemento principal

Consejo: Se permiten valores negativos.

Ejemplo

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

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>

</body>
</html>

Margen - Propiedad taquigráfica

Para acortar el código, es posible especificar todas las propiedades de margen en una propiedad.

La propiedad margen es una propiedad abreviada para las siguientes propiedades de margen individuales:

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

Pues así es como funciona:

Si la propiedad margin tiene cuatro valores:

margin: 25px 50px 75px 100px;

  • el margen superior es de 25px

  • el margen derecho es 50px

  • el margen inferior es 75px

  • el margen izquierdo es 100px

Ejemplo

Utilice la propiedad abreviada de margen con cuatro valores:

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px 100px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 4 values</h2>

<div>This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.</div>

<hr>

</body>
</html>

Si la propiedad margin tiene tres valores:

margin: 25px 50px 75px;

  • el margen superior es de 25px

  • los márgenes derecho e izquierdo son 50px

  • el margen inferior es 75px

Ejemplo

Utilice la propiedad abreviada de margen con tres valores:

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 3 values</h2>

<div>This div element has a top margin of 25px, a right and left margin of 50px, and a bottom margin of 75px.</div>

<hr>

</body>
</html>

Si la propiedad margin tiene dos valores:

margin: 25px 50px;

  • Los márgenes superior e inferior son de 25 píxeles.

  • los márgenes derecho e izquierdo son 50px

Ejemplo

Utilice la propiedad abreviada de margen con dos valores:

p {	margin: 25px 50px;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 2 values</h2>

<div>This div element has a top and bottom margin of 25px, and a right and left margin of 50px.</div>

<hr>

</body>
</html>

Si la propiedad margin tiene un valor:

margin: 25px;

  • los cuatro márgenes son de 25px

Ejemplo

Utilice la propiedad abreviada de margen con un valor:

p {
  margin: 25px;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 1 value</h2>

<div>This div element has a top, bottom, left, and right margin of 25px.</div>

<hr>

</body>
</html>

El valor automático

Puede establecer la propiedad de margen en auto para centrar horizontalmente el elemento dentro de su contenedor.

El elemento ocupará entonces el ancho especificado y el espacio restante se dividirá en partes iguales entre los márgenes izquierdo y derecho.

Ejemplo

Usar margen: automático:

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}
</style>
</head>
<body>

<h2>Use of margin: auto</h2>
<p>You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:</p>

<div>
This div will be horizontally centered because it has margin: auto;
</div>

</body>
</html>

El valor heredado

Este ejemplo permite que el margen izquierdo del elemento

se herede del elemento principal. (<div>):

Ejemplo

Uso del valor heredado:

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}
</style>
</head>
<body>

<h2>Use of the inherit value</h2>
<p>Let the left margin be inherited from the parent element:</p>

<div>
<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>
</div>

</body>
</html>

Todas las propiedades de margen CSS

margin

Una propiedad abreviada para establecer todas las propiedades de margen en una declaración

margin-bottom

Establece el margen inferior de un elemento.

margin-left

Establece el margen izquierdo de un elemento.

margin-right

Establece el margen derecho de un elemento.

margin-top

Establece el margen superior de un elemento.