保证金左侧和左侧位置给出具有相同百分比的不同值

Question

我有一个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是否考虑了填充并且没有结束？

或者还有其他因素我没有考虑过吗？

Answer 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>