带边距的HTML框模型

Question

HTML块元素的框模型中有一些我无法理解的东西.

请看下面的jsFiddle:

http://jsfiddle.net/5b7X2/1/

有一个外部和一个内部<div>,它们的左侧,顶部,右侧和底部都有相同的边距.外层<div>的边缘是透明的,所以我们看到彩色区域周围的白色身体.但是,内部<div>的边距仅在左侧和右侧可见.在我看来,50px橙色区域上方和下方应该有一个高度的红色条.

为什么我错了？

Answer 1

垂直边距相互折叠(根据一些相当复杂的规则,您可以在该链接的另一端找到),因此内边距顶部占据外边缘顶部的下半部分.