Margin-left 和 position left 以相同的百分比给出不同的值答案

【问题标题】：Margin-left and position left give different values with the same percentageMargin-left 和 position left 以相同的百分比给出不同的值
【发布时间】：2015-09-21 19:30:10
【问题描述】：

我有一个 div：

 width:100%;
 max-width:100%;
 position:relative;
 overflow:hidden;

这个 div 的直接子元素是：

 .my-class {

      position:absolute;
      bottom:6px;
      padding-left:12px;

 }

我希望子 div 与其他一些内容对齐。这个 div 之外的任何东西都不会影响它。当我使用left:30% 时，我得到一个号码，当我使用margin-left:30% 时，我得到一个不同的号码（在这种情况下，这是我想要的）。

margin-left 是否考虑 padding 而 left 不考虑？

或者还有其他一些我没有考虑到的因素？

【问题讨论】：

一个jsfiddle会很好......
两个结果对我来说都一样 - demo.

标签： css css-position margin

【解决方案1】：

是的。
填充会影响边距。

看看这个例子：

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

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

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

【讨论】：