Diferencia entre "margen izquierdo" e "izquierdo" (o "margen-derecho" y "derecho")

Question

¿Cuál es la diferencia entre margin-left: 10px; y position: relative; left: 10px;?

Se parece producir el mismo resultado

Answer 1

Al mover algo con position:relative usted no está realmente en movimiento el espacio que ocupa en la página, justo donde se visualiza.

Una manera fácil de probar esto es utilizar una estructura simple como esto:

<div id = "testbox"> 
    <img src = "http://www.dummyimage.com/300x200" id = "first"> 
    <img src = "http://www.dummyimage.com/300x200" id = "second"> 
</div> 

con el siguiente CSS:

img{ display:block; } 
#first{ margin-top:50px; } 

frente a este CSS:

img{display:block;} 
#first{position:relative; top:50px;} 

Verás que la primera mueve todo hacia abajo 50px mientras el segundo solo mueve la primera imagen hacia abajo (lo que significa que se superpondrá a la segunda imagen).

Editar: se puede comprobar que en acción aquí: http://www.jsfiddle.net/PKqMT/5/

comentario la position:relative; y top:100px; líneas y elimine la línea margin-top y verá la diferencia.

Answer 2

sólo puedo supongo que está ahí para otras posiciones con márgenes. es decir .:

margin-left: 5px; 
position: inherited; left: 10px; 

Answer 3

La manera más simple que puedo explicar es que margin-left mueve el elemento en sí, mientras que left (con position: relative) empuja a otros elementos. Aunque eso no es, tal vez la descripción más clara.

Con imágenes, sin embargo:

  +---------------------------------------------------------------------------+--------------+ 
      |                       | 
      |    +------------------------------------------------------------+    | 
      |    |               |    | 
      |    |    +------------------------------+    |    | 
      |    |    |        |    |    | 
    position |    |    |        |    |    | 
<--Left---->|<---margin--->|<---padding-->|<------------width----------->|<---padding-->|<---margin--->| 
      |    |    |        |    |    | 
      |    |    +------------------------------+    |    | 
      |    |               |    | 
      |    +------------------------------------------------------------+    | 
      +------------------------------------------------------------------------------------------+ 

Con position: absolute izquierdo también sirve para definir la distancia entre el propio elemento y el límite izquierdo de cualquier objeto que el elemento se coloca contra.

Answer 4

Considere cualquier elemento de bloque dado (un DIV por ejemplo) como una caja. position:relative; hace que la posición de la casilla en la página relativa al elemento en el que está anidada (otra DIV, por ejemplo) y left:10px; mueve la caja 10 píxeles hacia la derecha (LEJOS de la izquierda).

Ahora margin-left: 10px; no tiene nada que ver con eso y crea un margen (un campo de poder invisible si prefieres: P) a la izquierda del cuadro, que lo mueve si hay otro elemento fijo a su izquierda.