我们上一节主要介绍的是结构表现分离的好处，写完之后我们最终的效果并没有特殊的变化。
那么我们现在来分析一下，此时的标题栏还有哪些是需要我们去做改变的？
最扎眼的地方其实就是右上角那三个内容，发现他们之间并没有间隙，让人看起来很不舒服，我们来通过审查元素，对样式进行处理。
我们通过审查元素的方式来添加样式，首先我选中致蓝鸥人的标签，此时我们发现在右侧style里多了一些东西。
之前我们都是在element.style中写样式，但现在我们不用在这里写了。
因为如果在element.style中写样式，就会写在标签内部中。所以我们要写在.nav里面，并且查看我们写完样式的效果。
在这里我们需要注意两点：
第一点：当我们选中致蓝鸥人这个a标签，改变样式之后，我们发现三个a标签都收到了影响，
并不是只有致蓝鸥人这一个标签产生了间距，而是三个都有。
第二点：我们来看看在右下角有一块图形，如下图。
上图我们很早就已经看到了，但是我们一直没有说它，现在我们来研究一下，这个图中所包含的内容。
我们刚刚给nav加了一个margin-left：40px；并且在右下角的图中也有了一些变化。
现在我们来说说这个盒子。其中包括三个东西。分别是边距：margin,边框：border，留白:padding。
其实这三个东西很好理解，我们来对他们一一分析。
首先我给大家画了一个蓝色的框，就把它理解成一张纸。然后我们开始在里面写字。
由于我们比较节俭，不浪费纸张，所以我们从左上角开始写。
但是从左上角开始写我们发现，离上面太近了，在视觉上效果不太好。所以我们想着找个好看的位置写。
我们在上面留出一块区域，在左侧也留出一块区域，这样的话就看起来好多了。
那么留出来的这块区域，我们不打算写东西。这块区域就叫做留白。
我通过绿色的背景展示出来，留白：padding，然后在中间的部分仍然是内容区域，在内容区域我们可以继续写东西。
我们此时假定在内容区域已经写满了内容，就好比是我们写的一个书法，
写好之后，我就想给它加个框给表起来，那我们现在给它加个边框。
加了边框：border,其实我们这个书法有了边框之后，其实这幅书法作品就已经比较完整了，而且也比较有意境了。
既然都有意境了，我们就希望有更高的要求了，边上最好不要有什么干扰元素。
比如如果此时旁边跑来一条狗，那这个意境其实就打破了。
我们不希望有任何东西干扰这幅书法作品，那该怎么办呢？我们要求在这个书法的一定范围之内，任何东西都不可以过来。
其实这就相当于我们给它指定了一个边距，我们最外面的就是边距:margin,
边距实际上是没有背景颜色的，这个框也并不属于书法作品的一部分，但是他确确实实为这个书法作品腾出来一块区域，
其他东西不能靠近。现在我们在来看看这三层结构。
看上图三层，最外层是边距:margin, 边距其实不属于这个元素。然后是边框，之后是留白，然后最中间是我们的内容。
我们通过上面的例子对这三层进行了解释，他们到底有什么用呢？
其实这三个：边距、边框和留白，他们都是样式的一种。我们先来说说边距：margin。
边距到底有什么用呢？其实简单一句话，就是改变与周围元素的相对位置。
就像我们刚才所遇到的那个情况，三个a标签贴在一起，然后我们添加一个margin-left：40px；
通过字面意思我们也不难理解，那就是让它离左边距，有40像素，有了这个要求之后，他自然跟周围的元素拉开了一定距离。
这就达到了改变与周围元素的相对位置。
我们在具体的说一下：
边距一共有四个方向，上下左右。我们可以分别指定，例如上边距，下边距，左边距以及右边距。我们现在举个例子：
比如说我们有一个div，这个容器的内容区域是整个的区域。我们往里面放一个课后帮这几个字。
课后帮是一个行内元素，我们要设置margin的边距，就是让他改变与周围元素的相对位置。
我们打算设定一个margin-left:20px； 那设置完之后，效果会变成什么样呢？
这个时候课后帮其实就跟他的容器div的左边，保持了20像素的一个距离。
所以就是只改变与div的相对位置，而不会改变元素的大小。
那我们看看我们刚才所遇到的问题。
我们有三个链接在右上角，然后我们给他们公用的样式加了一个margin-left：20px；这个时候就变成了这个样子。
