一个div实际在浏览器上显示的高度应该如何计算呢？这里涉及height,padding,border,margin等几个概念。

首先说一下height，并不是你定义一个div多高，它实际显示在浏览器上就是多高的。height属性只表示它的正文的高度。

实际显示中除了正文，padding的高度也会体现在浏览器上，包括padding-top和padding-bottom，这就是所谓的内补丁。

还有就是border，上边框与下边框，border-top,border-bottom的宽度都是要加到div的实际高度中去的。

最后说一下margin，这是外补丁，也就是它与前面一个元素（或父元素）之间的间隔，不影响自己的高度。

下面我们用一个例子来看一个div实际有多高：

.div1{ height:100px; padding:10px; margin:10px; border: 1px solid red; }

这个div1类，高度100px，内补丁上下各10px，border上下各1px，所以最终高度为100+20+2=122px。之前说了margin跟实际高度无关。