[CSS越学越回去系列]包含块高度的问题？

Question

<div id="outer" style="height: 200px;">
    <div id="inner" style="position: static;margin: 1px;border: 2px;padding: 3px;height: 10px;"></div>
</div>

对于如上代码，根据css2.2文档规定：

对于position为static或relative的元素，其containing block为祖先元素中最近的block container box的content box(除margin,border,padding外的区域)；

可以得到：div#inner的包含块即div#outer产生的盒的内容区，由于该内容区的高度为200px（div#outer没有margin、border、padding），所以包含块的高度也为200px；

又根据CSS权威指南（P275，第四版）：

vertical formatting also has seven related properties: margin-top , border-top , padding-top , height , padding-bottom,border-bottom , and margin-bottom .
The values of these seven properties must equal the height of the block box's containing block.

可以得到：1px + 2px + 3px + 10px + 3px + 2px + 1px = 200px；

结论肯定是错的，但权威指南应该不会错（引用部分在该书的第三版和第四版都进行了相同的表述），文档更不会错，所以必然是自己的理解有问题，希望有高人解惑！

Answer 1

第一个 : 通俗点 子盒子 包含块是最近父盒子的内容块

第二个 这些值是指的父盒子包裹的内容块所有元素 并不是一个子元素未撑满 强行计算这个不等式....

Answer 2

height of the block box，块级盒子的高度并不是元素的高度。
在Chrome里面选择内层元素，能看到其下边距并不是1，而且一直延伸到外层元素的底边。这个下边距应该就是内层元素的块级盒子的。

Answer 3

一脸开心的进来, 一脸懵逼的出去

Answer 4

可以得到：div#inner的包含块即div#outer产生的盒的内容区

不能从上面这句得到下面这个结论吧：

由于该内容区的高度为200px，所以包含块的高度也为200px

包含块是包含块，也没说就等于内容高度啊

Answer 5

权威指南这话很明显是不对（至少是不全面）的。再举一个反例，containing block 高度固定、 overflow:visible 情况下，子块可以溢出，这也不符合它的说法。即便 containing block 高度是 auto ，上下 margin 依然可以坍塌，还是不成立。

既然参考规范，为何不顺便把计算部分也读了呢，比书表达要清晰得多。

Answer 6

我认为这里说的是
不设置outer的高度时，outer的高度由这个等式计算得出，而不是先设置高度，再强行逼着等式成立。

Answer 7

box-sizing
你有必要了解一下这个属性
传送门