css - 0px(但不是 0.1px)填充容器内的负边距

Question

当一个带有负边距的元素被放入一个带有 padding: 0 的元素中时，我遇到了一个意想不到的行为，这是意想不到的，因为如果 padding 设置为很小的 padding: 0.1px，有效渲染 0 像素的 padding。

我做了一个codepen要演示该问题，请使用按钮更改填充。

我已经在 Chrome 上试过了。

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

Answer 1

是的。此行为称为 collapsing margin .引用 MDN:

If there is no border, padding, [...] to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

你可以用你的填充来打开/关闭它，尽可能小。现代浏览器从一段时间开始就进行亚像素渲染。