「margin-left」和「left」（或「margin-right」，和「right」）之間的區別

Question

margin-left: 10px;和position: relative; left: 10px;之間的區別是什麼？

它似乎產生相同的結果

Answer 1

當你移動與position:relative東西你沒有實際移動到頁面上佔用的空間，只是在那裏顯示。

一個簡單的方法來測試，這是用一個簡單的結構是這樣的：

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

與下面的CSS：

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

與此CSS：

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

您會看到第一個將所有內容向下移動50px第二個僅將第一個圖像向下移動（這意味着它將重疊第二個圖像）。

編輯：你可以看看在這裏的行動：http://www.jsfiddle.net/PKqMT/5/

註釋掉position:relative;和top:100px;線，並取消對margin-top線，你會看到其中的差別。

Answer 2

我只能猜想它的存在與利潤的其他位置。即：

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

Answer 3

我可以解釋它的最簡單方法是margin-left移動元素本身，而left（與position: relative）將其他元素移開。儘管這不是最清楚的描述。

有圖片，雖然：

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

隨着position: absolute左還用於限定元件本身和任何對象的元件被定位成抵靠的左側邊界之間的距離。

Answer 4

將任何給定的塊元素（例如DIV）視爲一個盒子。 position:relative;使框在頁面上的位置相對於它嵌套在其中的元素（例如另一個DIV），並且left:10px;將框向右移動10個像素（從左邊開始）。

現在margin-left: 10px;與此無關，只是在框左側創建了一個邊距（一個不可見的力場，如果您更喜歡：P），如果左側還存在另一個固定元素，則會使其移動。