位置设置为绝对时，margin-left 和 left 的区别答案

【问题标题】：Difference between margin-left and left when the position set absolute位置设置为绝对时，margin-left 和 left 的区别
【发布时间】：2013-09-17 04:09:29
【问题描述】：

1.position:absolute;left:200px;

2.position:absolute；margin-left:200px;

上面的风格有什么不同吗？

【问题讨论】：

你是指外观上的差异还是实际发生的差异？
复制，在这里找到你的答案：stackoverflow.com/questions/6419411/…
我看不出外观有什么不同。是机制有什么不同吗？
如果您查看@kenttam 给出的重复答案，则表明是否存在明显差异将取决于场景。
如果你看一下这个例子：jsfiddle.net/NGLN/qbryN，根据场景的不同，外观会有所不同。

标签： css position absolute

【解决方案1】：

有细微的差别。

考虑以下示例：

<div class="wrap">
    <div class="ex1">Ex 1</div>
    <div class="ex2">Ex 2</div>
    <div class="ex3">Ex 3</div>
</div>

body {
    margin: 0;
}
.wrap {
    margin: 0 50px;
    background-color: lightgray;
    height: 200px;
    width: 400px;
}
.ex1 {
    position: absolute;
    background-color: beige;
    margin-left: 50px;
}
.ex2 {
    position: absolute;
    left: 50px;
    background-color: beige;
    margin-left: 0px;
}
.ex3 {
    position: absolute;
    top: 50px; /* so you can see what is happening */
    left: 0px;
    background-color: beige;
    margin-left: 50px;
}

查看结果：http://jsfiddle.net/audetwebdesign/WQA6B/

在示例 1 (.ex1) 中，边距距离父容器 (.wrap) 的左边缘 50px。

在示例 2 (.ex2) 中，元素距离视口的左边缘 50 像素。

要使.ex2 的行为类似于.ex1，您需要设置position: relative 到 .wrap，所以两个 div 都相对于相同的上下文定位。

还有另一个因素。在示例 1 中，我没有指定任何偏移量，因此如果您使用了 position: static，则该元素将保持在该位置，这就是边距是相对于包装器的左边缘计算的原因。

如果我设置了left: 0（参见示例 3），您将得到类似于示例 2 的结果。

【讨论】：

【解决方案2】：

尽管他们可以做类似的事情，但他们完全不同。

保证金是box model的一部分，其中还包括padding和border。盒子模型样式会改变对象本身的大小。

例如，如果您有以下样式的图像：

.my_box {
  display:block;
  margin-left:10px;
}

my_box 类的元素将在框的左侧添加 10 像素的边距。

上、左等

这些是positions，而不是增加元素框模型的大小，实际上是tell the elements where to be。

.my_box {
  display:block;
  left:10px;
}

上述样式将告诉该元素距其容器左侧 10 个像素（如果 position:relative，或页面（如果 position:absolute）。

【讨论】：

【解决方案3】：

是的，有区别。

见小提琴：http://jsfiddle.net/xk8Lz/

注意“父”元素中的10px padding 绝对定位元素。内边距和边框会影响绝对定位 Div 中的边距。

Left 将从“父”元素的开头开始计数。

代码：

<div class="left">
    left parent
    <div class="abs">Left</div>    
</div>

<div class="marginLeft">
    margin left parent
    <div class="abs">Margin-Left</div>    
</div>

CSS：

div, span {
    border: 1px solid #000;
    height: 80px;
    width: 80px;
}
.left, .marginLeft {
    background: #aaf;
    margin: 10px 0 0 10px;
    padding: 10px;
    position: relative;
}
.marginLeft {
}
.abs {
    background: #faa;
    position: absolute;
        top: 0;
}
.left .abs {
    left: 100px;
}
.marginLeft .abs {
    margin-left: 100px;
}

【讨论】：