崩溃的边缘不是完全崩溃而是忽略了背景？

Question

折叠边距是我认为已经理解的概念。但我仍然发现自己处于对我没有意义的情况下。

看看这个<hr />（绿色3px高线）。它位于一个明亮的灰色背景的容器内（不要介意我命名它bg-white，这是有原因的：X）

<hr />得到margin-top以在背景区域内创建一些空间 -

父母完全忽略了保证金。 但不知何故，边际“突破”了父母，仍然适用于有角度的偏执者......

我知道......

我可以给父母一个填充。但我有理由不这样做。

在 正上方的

<hr />解决了这个问题，但是当用户使用浏览器字体大小时，它似乎真的很麻烦并且可能会搞乱。

现在为什么会相应地应用保证金，但背景会被忽略？ <hr />明显位于浅灰色背景div

内

• 有人可以向我解释为什么会这样吗？
• 我真的被迫在<hr />？
之上放置某种间隔元素

（最新的El Capitan最新Safari的图片）