Question

当具有负边距的元素放在具有padding: 0的元素内时，我遇到了意外行为，这是意料之外的，因为如果填充设置为甚至很小{{}}，它就不会发生1}}，有效渲染0像素的填充。

我做了codepen来演示问题，使用按钮更改填充。

我已经在Chrome上试过了。

它应该以这种方式工作吗？如果是这样，为什么？

Answer 1

是。此行为称为collapsing margin。引用MDN：

如果没有边框，填充，[...]将块的边距底部与其最后一个子节点的边缘底部分开，则这些边距会崩溃。折叠的保证金最终在父母之外。

您可以使用填充打开/关闭它，尽可能少。现代浏览器从一段时间开始进行子像素渲染。

Answer 2

<div class="actions">
  <button onclick="set_padding ( 10 )">10px padding</button>
  <button onclick="set_padding ( 0,1 )">0.1px padding</button>
  <button onclick="set_padding ( 0 )">0 padding</button>
</div>

我把0.1加入0.1的实际值并且有效。

0px（但不是0.1px）填充容器内的负边距

2 个答案: