理解padding和margin，等于理解了盒子模型

导读

如果你在找有关盒子模型的理解问题，那么花上几分钟来看看，我会用通俗易懂的方法尽可能地把它讲清楚。

可能很多人觉得，前端的难点大概就在于JavaScript和各种框架了，但是真正被CSS支配过的人会明白，CSS从使用上，难度甚至比JS还高。尤其是布局中对盒子模型的理解，直接影响整体效率。

本文目的

1. 最近在开发中遇到了不少CSS的坑，打算记录一下以免再踩；
2. 希望用最浅显易懂的方法把盒子模型解释清楚，也考察了自己的理解和掌握能力；

一、概念

• 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
• CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
• 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

解释：上面的概念很官方，其实理解出来就一个意思。就是每个HTML标签都是一个盒子，当我们在页面上写各种HTML标签的时候，其实就是页面上摆放各种各样的盒子。

这里借用慕课网的一张图片就浅显易懂了：

二、实际中的盒子

实际上，浏览器的开发者工具中也常有盒子模型的踪影，要正确使用盒子模型来布局，那么首先需要了解“盒子”的各种“长、宽、高”：

三、属性详解（一句话解释）

• height（高度）：特指的是元素内容的高度，但并不是我们肉眼最后见到的高度（后面会说明为什么）；
• weight（宽）：也是内容的宽度，但并但并不是我们肉眼最后见到的宽度；
• border（边框）：没错，每个盒子都是有边框的，默认情况下不显示而已不代表没有
• padding（内边距）：指内容距离边框的长度，如果要内容居中，那么很明显需要四个内边距都相等；
• margin（外边距）：指盒子与盒子之间的距离，好比两个div之间相隔距离是多少。

四、难点阐述（核心）

盒子模型中，最需要弄懂的三个问题:

1. margin到底如何理解？
2. padding的内边距是否影响盒子的长、宽、高？
3. 我们为元素设置的CSS样式，里面的weight和height是我们最终在网页上看到的样子吗？

只要把这三个问题搞懂，那么基本上盒子模型就好理解了。

（一）margin：

首先给大家一张图去帮助理解margin（外边距）到底是怎样的存在：

我们之前也说过，其实页面上的元素都可以看作盒子，但如果你一口气地什么<div><span><img>一股脑写下来，那么他们肯定是紧挨着的，如果超出页面最大的weight限制，还会换行，那么要布局地好看，就需要用到margin了。

一般来说，我们最常用的是用margin：0 auto来做一个水平居中。

（二）padding如何影响盒子的

看图：

如图，padding字面意思上就是内容与盒子的间距，那么正常人肯定会这么想：那老子如果把padding调大了，内容会不会被挤小来适应呢？答案是，挤个卵子。
CSS最玄学的地方，就在于它一点都不“正交”（也就是所有元素都有可能互相影响，哪怕你调动的样式只有一两个）

padding最诡异的在于，如果调大了，它就会直接把盒子的边框往外扩，已达到你需要的距离，而不是调整内容的位置。

（三）肉眼可见的长宽高

其实，我们最终在网页上看到的元素，实际上是被盒子包围着的，而盒子实际上除了里面的内容以外还有边框、内外边距等属性，所以我们实际上看到的元素，是盒子的外表。

这就说明，页面上，元素显示的长宽高其实不一定是你在CSS中写下的，而是应该这样计算:

结语

本文旨在把盒子模型中的难点解释清楚，而不是深入地讲解盒子模型，CSS之所以被称之为玄学，适应为它本身就是一个投入多，收获少的工具，但是掌握20%就足以应付日常80%的业务了。