框结构模型图一：
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
提示：背景应用于由内容和内边距、边框组成的区域。
框结构模型图二：
外边距可以是负值
CSS padding 属性
padding 属性接受长度值或百分比值，但不允许使用负值。h1 {padding: 10px;}
表示将各边距都设置为10px-
h1 {padding: 10px 0.25em 2ex 20%;}按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值。 - 关于参数缺省问题，下面一一记录：
- padding 的缺省值即默认是 0。不过有两个元素例外， td , th 的 padding 缺省值为 1。
- 如果只有一个值，表示四个间隙都用同样的宽度，上面已有记录
- 如果有两个值，第一个值表示上下间隙宽度，第二个值表示左右间隙宽度。
可查看案例：所有内边距属性在一个声明中 - 如果有三个值，第一个值表示上间隙宽度，第二个值表示左右间隙宽度，第三个值表示下间隙宽度。
也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
- padding-top
- padding-right
- padding-bottom
- padding-left
百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。
注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度width设置，而不是相对于高度height。
CSS 边框(border)
每个边框有 3 个方面：宽度、样式，以及颜色。CSS2.1 规定：元素的背景是内容、内边距和边框区的背景。也就是说对于那些间断的边框，元素的背景应当出现在边框的可见部分之间。
CSS border-style 属性
border与padding一样，也可以分别对各个边进行分别定义，而且缺省值的设置一样：-
例子 1
border-style:dotted solid double dashed;
- 上边框是点状
- 右边框是实线
- 下边框是双线
- 左边框是虚线
-
例子 2
border-style:dotted solid double;
- 上边框是点状
- 右边框和左边框是实线
- 下边框是双线
-
例子 3
border-style:dotted solid;
- 上边框和下边框是点状
- 右边框和左边框是实线
-
例子 4
border-style:dotted;
- 所有 4 个边框都是点状
- 单边边框样式属性：
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式，包括 none。不再一一赘述，可点击链接自己查看。
CSS border-width 属性
应用方法与border-style几乎一样，不再赘述。
可能的值
| 值 | 描述 |
|---|---|
| thin | 定义细的边框。 |
| medium | 默认。定义中等的边框。 |
| thick | 定义粗的边框。 |
| length | 允许您自定义边框的宽度。 |
| inherit | 规定应该从父元素继承边框宽度。 |
分别设置边框各边的宽度：
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
CSS border-color 属性
大部分应用方法可以与上面类推，下面只记几点注意事项：注释：默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。
透明边框
我们刚才讲过，如果边框没有样式，就没有宽度。不过有些情况下您可能希望创建一个不可见的边框。
CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。
请看下面的例子：透明边框示例
它能在你需要的时候使其可见。这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（如果有可见背景的话）。
重要事项：在 IE7 之前，IE/WIN 没有提供对 transparent 的支持。在以前的版本，IE 会根据元素的 color 值来设置边框颜色。
最后，boder 有一种设置方式：
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
如下面示例：所有左边框属性在一个声明之中