CSS高度计算不会加起来

Question

我有以下代码：

<div id="headerwrap">
 <div id="headertop">aaa</div>
 <div id="headermiddle">abc</div>
 <div id="headerbottom">def</div>
</div>
#headerwrap      { position:fixed; top:0; left:0; } 
#headertop       { height:55px; margin:0 auto; }
#headermiddle    { height:25px; margin:0 auto; }
#headerbottom    { height:9px; margin:0 auto; }

我正试图按照固定位置的标题。当我这样做时，我发现重叠。用firebug检查我发现以下内容：

headerwrap height - 91px
headertop height - 55px
headermiddle height - 25px
headerbottom height - 9px

任何人都可以向我解释为什么数字不加起来？这给了我位置问题，我看不出有什么问题。

为什么55 + 25 + 9加起来为91？

Answer 1

你确定#headerbottom中的内容不高于9px吗？您可能需要使用overflow-y: hidden;

顺便说一下，使用该代码，headerwrap应该与headertop具有相同的高度，它不应该是其他的总和，因为9 + 25不大于55.

Answer 2

我得到89px，这是demo。

您确定所有的CSS以及任何元素上没有边框或额外样式吗？

编辑：刚看到你对其他答案的评论：）