盒子模型

描述： 每个盒子有四个边界（Content Edge，Padding Edge，Border Edge，Margin Border），内容区域，Padding区域, Border, Margin区域

Content Edge: 内容边界(盒子内容与Padding的分界点)
Padding Edge: 内边距边界(Padding与Border的分界点)
Border Edge: 边框边界(Border与Margin的分界点)
Margin Edge: 外边框边界(Marging与其它盒子Margin的分界点)

见图：

1. content area(内容区域): 内容区域由Content Edge限定
2. padding(内间距): Content Edge到Padding Edge之间的间距
3. border(边框): Padding Edge与Border Edge之间的区域)
4. margin(外边距) Border Edge与Margin Edge之间的区域)

margin area 与 padding area是抽像的不具体的所以只有边距与间距
content area 与 border是实体存在的所以有样式与大小

具体请参照现实中的盒子

内容区域 ：由内容边界限定，包括图片，文字，媒体等甚至是其它的盒子, 默认的内容区域是box-sizing: content-box; （W3C标准）, 可通过min-width、max-width、width设置宽度, min-height、max-height、heihgt设置高度

内边距区域 ：由内边距边界限定，扩展自内容区域，是填充元素中内容与边框之间的间距，它的尺寸是padding-box宽度与padding-box高度
padding内间距可以通过padding-top、padding-right、padding-bottom、padding-left控制
也可通过简写padding控制。

边框区域： 由边框边界限定, 扩展自内边距区域，是容纳边框的区域，其尺寸是border-box宽度与border-box高度
边框的样式由border-style控制，边框的粗细由border-width控制, 可合起来用border简写
假如盒子设有背景（background-color, background-img）背景将会一直延伸自边框的外沿（默认为在边框的下层延伸, 边框会盖在背景上）此默认为（background-clip:broder-box）背景区域表现可通过css属性background-clip改变。

background-clip:broder-box（默认背景的绘制区域）

background-clip:padding-box（背景延伸自边框内边沿）

background-clip:content-box（背景延伸自内容边界）

外边距区域： 由外边距边界限定， 用空白区域扩展自边框区域， 以分开相邻的元素。
外边距区域大小由margin-top、margin-right、margin-bottom、margin-left控制, 可用margin属性简写。tip: 相邻元素（垂直方向）的外边距会产生合并

注意： 行内元素（具有盒子模型）也存在内边距与边框，存在左右外边距不存在上下外边距，不存在宽度和高度，但其占用的空间【（每一行文字的高度）则由line-height属性决定】，边框与内边距显示在内容周围。