W3docs
es
Iniciar sesión

Propiedad CSS margin-left

La propiedad CSS margin-left define el espacio de margen en el lado izquierdo de un elemento. Conoce sus valores y ejemplos.

La propiedad margin-left establece el ancho del margen izquierdo.

Cuando la suma de width, margin-left, border, padding, el área de contenido y margin-right supera el ancho del contenedor, los márgenes pasan a ser auto.

La propiedad margin-left se define como la palabra clave <auto>, <percentage> o <length>. Su valor puede ser negativo, positivo o cero.

Información

Se permiten valores negativos.

Valor inicial0
Se aplica aTodos los elementos. También se aplica a ::first-letter.
HeredadoNo.
AnimatableSí. El margen izquierdo del elemento es animatable.
VersiónCSS2
Sintaxis DOMobject.style.marginLeft = "20px";

Sintaxis

Sintaxis de la propiedad CSS margin-left

margin-left: auto | <length> | <percentage> | initial | inherit;

Ejemplo de la propiedad margin-left definida como "px":

Ejemplo de la propiedad CSS margin-left con valor px

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .left {
        margin-left: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Margin-left property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="left">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>
Pruébalo tú mismo »

Resultado

Propiedad CSS margin-left

Ejemplo de la propiedad margin-left definida como "em":

Ejemplo de la propiedad CSS margin-left con valor em

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .left {
        margin-left: 8em;
      }
    </style>
  </head>
  <body>
    <h2>Margin-left property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="left">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo de la propiedad margin-left definida como "px", "em" y "%":

Ejemplo de la propiedad CSS margin-left con valores em, px y %

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.p1 {
        margin-left: 6em;
      }
      p.p2 {
        margin-left: 40px;
      }
      p.p3 {
        margin-left: 10%;
      }
    </style>
  </head>
  <body>
    <h2>Margin-left property example</h2>
    <p>No specified margin.</p>
    <p class="p1"> Left margin is set to 6em.</p>
    <p class="p2">Left margin is set to 40px.</p>
    <p class="p3">Left margin is set to 10%.</p>
    <p>No specified margin</p>
  </body>
</html>
Pruébalo tú mismo »

Valores

ValorDescripciónPruébalo
autoEstablece el margen izquierdo. Es el valor predeterminado de esta propiedad.Pruébalo »
lengthDefine un margen izquierdo en px, pt, cm, etc. El valor predeterminado es 0.Pruébalo »
%Establece el margen izquierdo en % del elemento contenedor.Pruébalo »
initialHace que la propiedad use su valor predeterminado.Pruébalo »
inheritHereda la propiedad de su elemento padre.

Práctica

Práctica
¿Qué especifica la propiedad 'margin-left' en CSS?
¿Qué especifica la propiedad 'margin-left' en CSS?
Was this page helpful?