0

在这个网站上：www.giftlab.com

顶部的“免费送货”圆圈（div id: floating-header-button）有position: absolute; top: 10px. 它的父 div ( headerContainer) 有样式position: relative; padding: 1px;

如果父 div ( headerContainer) 的内边距从 1px 更改为 0px，则子 div ( floating-header-button) 会将页面向下下降约 20px。这是什么原因造成的？1px 的 padding 变化如何产生 20px 的位置变化？

如果我增加内边距，圆圈会保持原位，而其他一切都会移动（如我所料），那么为什么将内边距减少到 1px 以下会产生这种违反直觉的效果呢？

4

1 回答 1

2

Without the padding on the .headerContainer, a margin on a sub-element (.logo specifically) collapses with .headerContainer, bumping the entire container down by its margin which is 20px.

于 2013-11-07T14:58:48.593 回答