这一节我们来说说留白
留白有什么用？padding到底有什么用，我们在分析之前，先回顾一下我们之前遇到的那几层结构。
在结构中我们有边距、边框和留白，在这里我们提出一个问题，
就是一个元素的宽度和高度边界到底在哪里？
我们通过图片为大家展示：
我们在这里直接告诉大家，一个元素的宽度就等于内容宽度+左右留白，
一个元素的高度就等于内容高度+上下留白。
虽然公式很简单，但有句话说越简单的公式其中越有料。
有什么料呢？我们通过一个例子来看看这个公式能有什么作用？
假设我们有一个div，然后宽度是100，高度是960，这整个div区域都可以写内容。
如果我们套用刚刚说的公式就如下：
元素宽度是已经设定好的960等于内容宽度+左右留白。
现在的内容宽度是960，然后左右留白是0.这样一算，元素的总宽度就出来了。
元素高度的算法是一样的。
如果我们为div设定一些留白padding，我们来看看会变成什么样？
先宽度总数并没有改变，但是由于有了左右留白共计40像素，
这时候的内容宽度就变小了，由于上下也有了留白，所以内容的高度也变小了。
这是怎么回事呢？就是在我们给div已经设置好宽度之后，
在设置padding的话，就会压缩内容宽度和内容高度。
现在我们在把上一节讲到margin最后的一个例子重现一下。
当时我们说紧靠浏览器上边缘的元素，
比如说div中的第一个子元素课后帮设置margin-top的话，
他就连带div也一同顶下来，并没有跟随我们预期的效果。
对于这种情况，我们也进行了分析，就是我们换个角度思考，
我们认为是div容器的上边缘的部分就是不想有内容。我们来看看怎么做。
元素宽度等于内容宽度加上左右留白，元素高度等于内容高度加上上下留白。
此时我们希望课后帮在不连带div的基础上，向下挪一点。这个问题怎么解决。
其实呢，宽度我们可以不动，而高度上我们可以给div设定一个上部的留白，
由于元素高度已经设定，所以设置padding的时候，就会压缩内容高度，
这样一减，内容高度就变小了。也就相当于把课后帮这几个字往下挪了20像素，
同时div的这个区域并没有发生任何变化。
这个就是padding的第一个作用
就是宽度高度已设定的时候，padding可以改变内部元素的位置，
我们在回到刚刚写过的公式
我们说这个简单的公式很有料，所以我们换一个角度在来看看。
假设、如果我们现在遇到的是inline元素，由于他的特性，无法设定高度和宽度，
宽度和告诉完全取决于课后帮这几个字。那么我们在来套用一下公式。
课后帮此时的宽度和高度是不可以设定的，也就是说此时课后帮的宽度和高度完全是算出来的。
怎么算的呢，就是由内容宽度加上左右留白，就是宽度。由内容高度加上上下留白就是高度。
可想而知，如果我们给inline元素课后帮上下左右留白都设置10像素的话，会发生什么情况呢？
左右留白都是10，那么一共就是20像素，但是内容的宽度没变，结果就是整体的宽度变大了。高度也一样！
那么padd的第二个作用就出来了，就是在宽度高度未设定的时候，padding可以撑大元素。
我们总结一下padding的两个作用。
一个是在宽度高度未设定的时候，可以撑大元素
一个是在宽度高度已设定的时候，改变内部元素的位置
这两个效果并不是互斥的，这两个效果可以同时发生。
怎么个同时发生法呢，其实是在不同的方向上发生这两个效果。
方向一就是，在高度未设定的时候，就可以撑大本元素的高度。
方向二就是，在宽度已设定的时候，就能改变内部元素的位置。
我们仍然用例子分析：
比如说有一个div，然后里面放了一个课后帮这么一个行内元素，
此时的宽度是设定好的960，内容宽度就是算出来的值，960减去留白就是内容宽度。
然而div的高度是未设定的，所以他的值是由内容高度加上上下留白，也就是12+0=12。
那如果我们此时给他设定左右留白和上下留白会发生什么事情呢？
就会发生这么个情况：
首先说宽度，由于宽度已经设定了，那么在加上留白20像素，那就会压缩内容的宽度。
也就是由原来的960-20就等于内容的宽度940。其实相当于改变了课后帮在水平方向的一个位置。
再来说高度，由于高度是没有设定的，此时的高度是由内容撑开的，我们设定了上下留白，
留白部分就从0变到了20，留白有了20在加上内容的高度12，那么此时的高度就变成32了，
这样的话其实相当于改变了课后帮在垂直方向的一个位置。
我们总结一下：
两点
1.横向上，压缩了内容区域，改变了内容元素的位置。
2.纵向上，撑大了元素，其实也相应的改变了内部元素的位置。