使用方框大小時，CSS負邊距不正確：邊框

Question

當設置負邊距以將子元素拉到具有填充的父元素邊界時，移動的距離不正確。

這是一個測試案例：

<div class='full'> 
    full 
    <div class='child'> 
    child 
    </div> 
</div> 

* { 
    box-sizing: border-box; 
} 

.full { 
    width:80%; 
    padding-left: 3%; 
    background: #000; 
    color: #fff; 
} 
.child { 
    margin-left: -3.75%; /* 3/80 * 100 */ 
    padding-left: 3.75%; 
    background: #ddd; 
    color: #000; 
} 

http://codepen.io/anon/pen/fuaxE

如果我刪除盒大小的利潤率是正確的，但邊界中設置的陰性切緣是正確的 - 看行向下子元素的左側。

我錯過了一些明顯的東西嗎？

Answer 1

這裏的問題是你有一個小姐計算：

margin-left: -3.75%; /* 3/80 * 100 */ 

它必須是：

margin-left: -3.8961%; /* 3/77 * 100 */ 

由於他父母的真正Width是80% - 3%的padding:left。請檢查這個Demo