Propiedad margin de CSS

La propiedad CSS margin se utiliza para crear espacio alrededor del elemento.

La propiedad margin es una abreviatura de las siguientes propiedades:

Podemos usar la propiedad margin para todos los lados (superior, inferior, izquierdo, derecho) a la vez. Para el lado superior usamos margin-top, para el inferior margin-bottom, para el izquierdo margin-left y para el derecho margin-right.

La propiedad margin puede definirse con uno, dos, tres o cuatro valores:

margin: 25px 10px 15px 20px. Este código significa que el margen superior debe ser de 25px, el derecho de 10px, el inferior de 15px y el izquierdo de 20px.
margin: 15px 10px 20px. Esto significa que el margen superior debe ser de 15px, los márgenes derecho e izquierdo de 10px, y el inferior de 20px.
margin: 15px 10px. Este código significa que los márgenes superior e inferior son de 15px, y los márgenes derecho e izquierdo son de 10px.
Si el margen tiene un solo valor, se aplica a los cuatro lados.

INFO

Los valores negativos son válidos.

INFO

Los márgenes superior e inferior no tienen efecto en elementos en línea, como <span> o <code>.

Valor inicial	0
Se aplica a	Todos los elementos.
Heredado	No.
Animable	Sí. El outline es animable.
Versión	CSS1
Sintaxis DOM	Object.style.margin = "20px 10px";

Sintaxis

Sintaxis de la propiedad margin de CSS

css

margin: length | auto | initial | inherit;

Ejemplo de la propiedad margin:

Ejemplo de la propiedad margin de CSS con cuatro valores

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #1c87c9;
        color: #fff;
        margin: 25px 10px 15px 20px;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <p>Paragraph with background-color, color and margin properties.</p>
  </body>
</html>

Try it Yourself »

Resultado

CSS margin Property

Ejemplo de la propiedad margin, donde el margen de un elemento se establece al 10% para todos los lados:

Ejemplo de la propiedad margin de CSS con valor en % (porcentaje)

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.example {
        margin: 10%;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Try it Yourself »

Ejemplo de la propiedad margin definida como "em":

Ejemplo de la propiedad margin de CSS con valor em

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.example {
        margin: 4em;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Try it Yourself »

Veamos el siguiente ejemplo que muestra la diferencia entre las propiedades margin, padding y border:

Ejemplo de la propiedad margin con las propiedades padding y border:

Ejemplo de la propiedad margin de CSS con un valor (px)

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: #eee;
        width: 200px;
        border: 20px solid #8ebf42;
        padding: 30px;
        margin: 55px;
      }
    </style>
  </head>
  <body>
    <h2>Margin property example</h2>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción	Probar
auto	Establece el margen. Es el valor predeterminado de esta propiedad.	Probar »
length	Define un margen en px, pt, cm, etc. El valor predeterminado es 0.	Probar »
%	Establece el margen en % del elemento contenedor.	Probar »
initial	Hace que la propiedad use su valor predeterminado.	Probar »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Cuáles de las siguientes afirmaciones son verdaderas sobre los márgenes CSS?

Los márgenes se utilizan para crear espacio alrededor de los elementos, fuera de cualquier borde definido.Los márgenes no tienen propiedades.Con CSS, tienes control total sobre los márgenes.Existen propiedades para establecer el margen de cada lado de un elemento (superior, derecho, inferior e izquierdo).Los márgenes son siempre transparentes.Puedes usar valores negativos para crear efectos de superposición.La propiedad margin-clear te permite establecer el margen de un elemento.

Propiedad margin de CSS ​

Sintaxis ​

Ejemplo de la propiedad margin: ​

Resultado ​

Ejemplo de la propiedad margin, donde el margen de un elemento se establece al 10% para todos los lados: ​

Ejemplo de la propiedad margin definida como "em": ​

Ejemplo de la propiedad margin con las propiedades padding y border: ​

Valores ​

Práctica ​

Propiedad margin de CSS

Sintaxis

Ejemplo de la propiedad margin:

Resultado

Ejemplo de la propiedad margin, donde el margen de un elemento se establece al 10% para todos los lados:

Ejemplo de la propiedad margin definida como "em":

Ejemplo de la propiedad margin con las propiedades padding y border:

Valores

Práctica