7

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?

4
  • Una es para posicionar el elemento y la otra es para establecer márgenes al elemento... Commented el 8 ene. 2017 a las 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
    Commented el 8 ene. 2017 a las 12:58
  • Gracias, pero porque la puntuación negativa?
    – largoWinch
    Commented el 8 ene. 2017 a las 13:07
  • 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
    Commented el 8 ene. 2017 a las 13:17

3 respuestas 3

9

.

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;

4

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?

1
  • 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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.