7.2. Block-Level Elements – 块级元素
块级元素的行为方式很有趣，有时可以预测，有时又会出人意料。为了更好地理解块级元素是如何处理的，我们必须充分的理解CSS中的盒模型：
通常，元素的width定义为左内边线与右内边线之间的距离，height则是上内边线与下内边线之间的距离。不同宽度、高度、补白、边界与边框共同决定了文档的布局。
7.2.1. Horizontal Formatting – 水平格式编排
垂直方向的格式编排非常简单，所以我们从它开始。事实上有时候垂直格式编排也要比我们想像的稍微复杂一点，比如说width如何影响内容区域的宽度，看一个例子:
wideness?
现在段落文本的宽度是200px，但是如果我们再为其设置一些其它的属性：
wideness?
假如现在p元素上有背景属性，那么可以通过背景体现的内容区域就有220px，因为其左右各有了10px的补白。再加上边界值，整个P元素的占据的宽度就有了260px。
假如有一个div的width我们设置为30em，里面有两个P元素，每个P元素算上边界、补白等因素之后宽度为30em，那么效果图示中的空白实际上就是段落元素的边界了，如果div本身也设置了补白的话，那么元素与元素之间将有更多的空白：
7.2.1.1. Horizontal properties – 水平属性
影响水平格式编排的属性主要有七个：
margin-left | border-left | padding-left | width | padding-right | border-right | margin-right
我们可以通过下图观察效果：
在这七个属性中，width、margin-left和margin-right可以被设置为auto，而其它几个属性必须指定具体的数值，或者默认为0：
Width可以设置为auto或非负数值，而当设置为auto时，其在排版上可能会产生一些差异。