“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），如果左侧还存在另一个固定元素，则会使其移动。