CSS框模型（盒子模型）padding与border属性

框结构模型图一：

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

提示：背景应用于由内容和内边距、边框组成的区域。

框结构模型图二：  

外边距可以是负值

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 简写属性，用于把下边框的所有属性设置到一个声明中。

如下面示例：所有左边框属性在一个声明之中