Differenza tra "margin-left" e "left" (o "margin-right" e "right")

Question

Qual è la differenza tra margin-left: 10px; e position: relative; left: 10px;?

sembra produrre lo stesso risultato

Answer 1

Quando si sposta qualcosa con position:relative che non sei in realtà in movimento lo spazio che occupa sulla pagina, proprio dove è visualizzato.

Un modo semplice per verificare questo è quello di utilizzare una struttura semplice come questo:

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

con il seguente CSS:

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

contro questo CSS:

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

Vedrai che il primo sposta tutto in basso di 50px mentre il secondo sposta solo la prima immagine verso il basso (il che significa che si sovrapporrà alla seconda immagine).

Edit: è possibile controllare fuori in azione qui: http://www.jsfiddle.net/PKqMT/5/

Commentare le position:relative; e top:100px; linee e rimuovere la linea margin-top e vedrete la differenza.

Answer 2

posso solo supporre è lì per altre posizioni con margini. cioè .:

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

Answer 3

Il modo più semplice per spiegarlo è che sposta l'elemento stesso, mentre left (con position: relative) allontana altri elementi. Anche se non è così, forse la descrizione più chiara.

Con foto, però:

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

Con position: absolute sinistra serve anche per definire la distanza tra l'elemento stesso e il limite sinistro di qualsiasi oggetto l'elemento è posizionato contro.

Answer 4

Considerare un qualsiasi elemento di blocco (un DIV ad esempio) come una casella. position:relative; rende la posizione della casella sulla pagina relativa all'elemento in cui è nidificata all'interno (un altro DIV ad esempio) e left:10px; sposta la casella 10 pixel a destra (LONTANO da sinistra).

Ora margin-left: 10px; non ha nulla a che fare con questo e crea solo un margine (un campo di potenza invisibile se preferisci: P) a sinistra della scatola, che lo fa muovere se c'è un altro elemento fisso bloccato alla sua sinistra.