css - margin-left 和 position left 给出不同的值，但百分比相同

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 是否考虑了 padding 而 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>