¿Hay alguna diferencia entre left y margin-left?

Question

Me gustaría saber cual es la diferencia, si existe alguna, entre left y margin left o right y margin right en CSS.

¿Puede ser que la diferencia esté que uno es CSS y otro CSS3?

Una es para [posicionar](https://developer.mozilla.org/en-US/docs/Web/CSS/position) el elemento y la otra es para establecer [márgenes](https://developer.mozilla.org/es/docs/Web/CSS/margin) al elemento... — Black Sheep, Jan 08 '17 at 12:54
Left, bottom, top o right solo funcionan cuando usas position: relative o absolute. Con fixed no me acuerdo si fncionaba. Si no recuerdo mal, con left mueves el objeto y el espacio que ocupaba queda libre y con margin sigue quedando el espacio en el que estaba el objeto ocupado. No recuerdo bien si esto era asi. Que alguien me lo confirme, no se si era esto o era con otra cosa. — Lorthas, Jan 08 '17 at 12:58
Eso, mismo iba a preguntar yo. Porque la puntuación negativa? He buscado la misma pregunta en Stack Overflow en inglés y tiene un montón de votos positivos... Yo no lo entiendo. Esta plataforma está para preguntar dudas que pueden no quedar bien resueltas en manuales. Es cierto que se debe usar el buscador primero por si ya existe alguna pregunta parecida, pero a veces aunque una pregunta puede parecerse puede cambiar en algun detalle que puede no ser igual a la otra pregunta y puede cambiar en pequeñas cosas la duda. — Lorthas, Jan 08 '17 at 13:17

Black Sheep · Accepted Answer · 2017-01-08T14:32:31.047

Sí.

Una es para posicionar elementos y la otra es para establecer márgenes al elemento.

Ejemplo práctico:

#caja-position {
  width: 150px;
  height: 150px;
  background-color: red;

  position: absolute;
  top: 20px;
  left: 50px;

  margin-top: 20px; /* si funciona */
}

#caja-margen {  
  width: 50px;
  height: 50px;
  background-color: blue;

  top: 1000px; /* no funciona */
  left: 1000px; /* no funciona */

  margin-left: 50px;
  margin-top: 50px;
}

<div id="caja-position">
  <div id="caja-margen"></div>
</div>

Para que funcionen las propiedades left, right, top, bottom se tiene que declarar primero la propiedad position, en el ejemplo verás que no funciona en la caja-margen las propiedades top y left.

Con las propiedades margin-*|-top -right -bottom -left se usa para especificar un espacio alrededor de una caja y se pueden especificar independientemente.

Shorthands de la propiedad margin:

margin: [top, right, bottom, y left] ej. margin: 10px;
margin: [top y bottom] [left y right] ej. margin: 10px 10px;
margin: [top] [right y left] [bottom] ej. margin: 10px 10px 10px;
margin: [top] [right] [bottom] [left] ej. margin: 10px 10px 10px 10px;

score 4 · Answer 2 · edited Apr 13 '17 at 13:00

Respuesta corta

Sí, si que la hay.

Respuesta larga

La propiedad left se utiliza para posicionar un elemento, es decir, para indicar que el elemento se posicione con un valor x por la izquierda con respecto al elemento sobre el que esté tomando referencia. Esta propiedad sólo podrá realizarse si el elemento está posicionado (con position relative, absolute o fixed).

Por otro lado, la propiedad margin-left no toma en cuenta la referencia de posicionamiento del objeto si no el margen que le vamos a establecer al elemento. Es decir, no va a posicionar el elemento respecto a otro si no que va a situar un margen izquierdo (o derecho) independientemente de dónde esté posicionado.

Si tienes dudas sobre que realiza cada tipo de posicionamiento puedes ver la respuesta que dí en esta otra pregunta: ¿Cual es la diferencia entre position: relative, position: absolute y position: fixed?

score 1 · Answer 3 · answered Jan 08 '17 at 13:40

Left, bottom, top o right: se utilizan para el posicionamiento. Link
Margin left: Establece la anchura del margen izquierdo de los elementos. Link
Margin right: Establece la anchura del margen derecho de los elementos. Link

La diferencia entre CSS y CSS3 es que CSS3 es una actualización que agrega mas cantidades de atributos a un lenguaje como es el CSS.

¿Hay alguna diferencia entre left y margin-left?

3 Answers3