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

Question

我有一个 div 有：

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

这个 div 的直接 child 是：

 .my-class {

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

 }

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

margin-left 是否考虑了填充而 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>

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

Margin-left and position left give different values with the same percentage

css

css-position

margin