保证金左和位置留下了相同的百分比

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%时，我得到一个不同的数字（在这种情况下是我想要的）。

是否考虑填充余量并留下余量？

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

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>