你知不知道HTML元素都是装在盒子里的？_html/css_WEB-ITnose

不管你要用HTML显示什么内容，统统都会被放到一个长方形的盒子里。但浏览器呈现给我们的是一个二维世界，二维世界里的盒子跟我们这个世界的盒子不一样。二维世界里的盒子虽然只有宽和高两个维度，但从能装东西这个角度来说，那确实是盒子。

你在浏览器界面上看到的所有HTML元素都是装在盒子里的，不过你可能看不到盒子，要仔细观察才能发现一些蛛丝马迹。而且这个盒子还不止一层，足足有三层，大概是这个样子的：

图一：盒子模型示意图 （源自 Introduction to the CSS box model ）

你要显示的内容在最里面，然后外面有一个 padding 层，接下来是 border 层，最外一层叫 margin 。这三层里有可能可以直接看到的只有 border ，其它两层虽然你可以感觉到它们的存在，但从视觉上来说，它们是完全透明的。

在继续往下看之前，先考虑两个问题：

1. 为什么要搞个盒子？
2. 这个盒子关我啥事儿？

第一个问题说来话长，如果确实像知道，还是去找制定CSS标准的那帮人，或者做浏览器的聊聊吧。说实话我也不知道为啥。

第二个问题，先假设你要买一套400*100的房子（像素，不是米！），规格说明是这样的：

div {  width: 400px;  height: 100px;  border: 6px solid #949599;   margin: 20px;  padding: 20px;  }

你一看 width 和 height 没问题，就一蹦一跳地去交钱了。结果算账的时候，你发现开发商要跟你收492*192的钱，你是不是想问候他老母？但还没等你开口，他就拿出设计图：

图二、盒子模型设计图（源自 Opening the Box Model ）

然后甩给你两个公式：

• width = margin-right + border-right + padding-right + width + padding-left + border-left + margin-left
• height = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

并且还没等你看明白，就拿出计算器一通按，然后笑眯眯地看着你，请你自己看492和192是怎么来的。

• Width: 492 = 20 + 6 + 20 + 400 + 20 + 6 + 20
• Height: 192 = 20 + 6 + 20 + 100 + 20 + 6 + 20

简单来说，宽度要把所有横向的数都加起来，不能漏掉 margin 、 border 和 padding 的 left 和 right ；高度要把竖向的所有数都加起来，不能漏掉 margin 、 border 和 padding 的 top 和 bottom 。

所以说，你本来只想放一个400px*100px的图片，但浏览器却要给你492px*192px，如果你毫无心理准备，肯定会有点小激动吧。因此在设计页面时，一定要掌握盒子模型，要知道还有公摊面积这回事儿。不过这里只是简单介绍了一下，要深入了解，可以到两张图片的出处去看一下。

另外，chrome浏览器的开发者工具可以查看所有页面元素的盒子。 这里还有个小程序 ，可以调节几个关键的属性值，你可以直观地感受下。