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

使用box-sizing时，CSS负边距不正确：border-box

1 个答案: