left,margin-left的使用场景有什么区别？

Question

left和margin-left的区别我都明白了，他们的使用条件有区别，但是在某些情景下，都可以用来定位，这时候该如何选择使用？

Answer 1

left、right、top、bottom
是要跟定位position配合使用
而margin-left等没有定位也可以用
但是 你用margin-left等时要小心咯 各种坑@_@
主要是因为各个浏览器对margin解析不同 所以 会出现bug
大多数情况下 建议用padding O(∩_∩)O
以下代码展开讨论：（原谅我直接写了内联样式）
一、没有定位，直接设置margin-left

<div class="close" style="width: 200px;height:200px;background: red;">
   <div class="option" style="width: 100px;height: 100px;margin-left: 100px;background: blue;"></div>

执行结果：小盒子相对父亲红盒子向右偏移100px

二、没有定位，直接设置left

<div class="close" style="width: 200px;height:200px;background: red;">
   <div class="option" style="width: 100px;height: 100px;left: 100px;background: blue;"></div>
</div>

执行结果：小盒子保持原有位置

三、定位后 设置left

<div class="close" style="width: 200px;height:200px;background: red;position: relative">
   <div class="option" style="width: 100px;height: 100px;left: 100px;background: blue;position: absolute"></div>
</div>

执行结果：跟第一次一样

四、在定位基础上 设置margin-left

<div class="close" style="width: 200px;height:200px;background: red;position: relative">
   <div class="option" style="width: 100px;height: 100px;margin-left:20px;left: 100px;background: blue;position: absolute"></div>
</div>

执行结果：此时小盒子出了大盒子margin-left距离

Answer 2

left是要和position配合的，否则就没意义，margin-left，是直接作用于盒子模型的（有无position都无所谓）。通常如果直接设置元素间隔就用margin，否则，如果要达到某种定位效果，就要配合left(都已经有了left了，设置margin-left不是多余了嘛)了

Answer 3

上面都说的没错，但是left要跟position一起使用我要纠结一下，因为还有浮动。

Answer 4

如果是用于定位，一般还是应该优先用left吧，有特殊需要才会上margin-left。