一个div实际占的高度应该怎样计算


关键词

html div 高度 计算

摘要

本文介绍在使用div+css写html代码时,一个div元素显示在浏览器上的高度应该如何计算。包括height,padding,border,margin等概念。

一个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跟实际高度无关。

 

文章的版权

洪哥写文章很苦逼,如果本文对您略有帮助,点击感兴趣的广告支持洪哥!万分感谢!本文属于“洪哥笔记”原创文章,转载请注明来源地址:一个div实际占的高度应该怎样计算:http://www.splaybow.com/post/div-height.html

关注与收藏

如果您在服务器运维、网络管理、网站或系统开发过程有需要提供收费服务,请加QQ:115085382!十年运维经验,帮您省钱、让您放心!
亲,如果有需要,先存起来,方便以后再看啊!加入收藏夹的话,按Ctrl+D


« PHP版本的组织机构代码证校验函数 使用<a>标签来罩着一个div »