Différence entre "marge-gauche" et "gauche" (ou "marge-droite" et "droite")

Question

Quelle est la différence entre margin-left: 10px; et position: relative; left: 10px;?

Il semble produire le même résultat

Answer 1

Lorsque vous déplacez quelque chose avec position:relative vous n'êtes pas fait bouger l'espace qu'il occupe sur la page, là où il est affiché.

Un moyen facile de tester est d'utiliser une structure simple comme ceci:

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

avec le CSS suivant:

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

par rapport à ce CSS:

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

Vous verrez que le premier se déplace de 50px tout en la seconde déplace seulement la première image vers le bas (ce qui signifie qu'elle chevauchera la deuxième image).

Edit: vous pouvez le vérifier en action ici: http://www.jsfiddle.net/PKqMT/5/

Commentaire sur les position:relative; et top:100px; lignes et décommentez la ligne margin-top et vous verrez la différence.

Answer 2

Je ne peux supposer qu'il est là pour d'autres postes avec des marges. i.e. .:

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

Answer 3

La manière la plus simple que je puisse expliquer est que margin-left déplace l'élément lui-même, tandis que left (avec position: relative) repousse d'autres éléments. Bien que ce ne soit pas, peut-être la description la plus claire.

Avec photos, bien que:

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

Avec position: absolute gauche sert également à définir la distance entre l'élément lui-même et la limite gauche de tout objet l'élément est positionné contre.

Answer 4

Considérer un élément de bloc donné (un DIV par exemple) comme une boîte. position:relative; place la position de la boîte sur la page par rapport à l'élément dans lequel elle est imbriquée (une autre DIV par exemple) et left:10px; déplace la boîte de 10 pixels vers la droite (LOIN à partir de la gauche).

Maintenant, margin-left: 10px; n'a rien à voir avec cela et crée simplement une marge (un champ de puissance invisible si vous préférez: P) sur la gauche de la boîte, qui le fait bouger si un autre élément fixe est coincé sur sa gauche.