CSS padding属性定义边内补白方法探究

开发 前端
本文向大家介绍一下CSS padding属性定义边内补白的概念,边框的里面可以有一层边内补白(padding),边内补白定义了边框与边框里面内容的距离。

你对CSS padding属性定义边内补白的概念是否了解,这里和大家简单分享一下,边内补白分为上边内补白(top),下边内补白(bottom),左边内补白(left),右边内补白(right),而且边内补白只有width一种属性。

CSS padding属性定义边内补白

边框的里面可以有一层边内补白(padding),边内补白定义了边框与边框里面内容的距离。边内补白分为上边内补白(top),下边内补白(bottom),左边内补白(left),右边内补白(right)。
边内补白只有width一种属性.

padding--定义边内补白

取值:<padding-width>{1,4}|inherit
<padding-width>{1,4}:边内补白宽度
inherit:继承
初始值:0
继承性:否
适用于:所有元素,,除了table-row-group,table-header-group,table-footer-group,table-row,table-column-group和table-column

◆padding:边内补白

padding-width的取值
<length>:长度表示法
<percentage>:百分比表示法,padding百分比的计算是基于生成的框的包含块的宽度.

auto:自动
提示:padding边内补白不可以取负值;边内补白是看不到的,因为它本身是透明的.
示例
◆为padding-width指定一个值 

  1. padding:padding-top/padding-right/padding-bottom/padding-left;  
  2. p#onepaddings  
  3. {  
  4. padding:12px;  
  5. }  
  6.  

所有边内补白全部为12px
等价于下面的定义
 

  1. p#onepaddings  
  2. {  
  3. padding-top-width:12px;  
  4. padding-right-width:12px;  
  5. padding-bottom-width:12px;  
  6. padding-left-width:12px;  
  7. }  
  8.  

◆为padding-width指定两个值 

  1. padding:padding-top/padding-bottompadding-right/padding-left;  
  2. p#threepaddings  
  3. {  
  4. padding:12px5%;  
  5. }  
  6.  

上下边内补白是12px,左右边内补白是5%(相对于整个页面).
等价于下面的定义
 

  1. p#threepaddings  
  2. {  
  3. padding-top-width:12px;  
  4. padding-right-width:5%;  
  5. padding-bottom-width:12px;  
  6. padding-left-width:5%;  
  7. }  
  8. 为padding-width指定三个值  
  9. padding:padding-toppadding-right/padding-leftpadding-bottom;  
  10. p#threepaddings  
  11. {  
  12. padding:12px5%0;  
  13. }  
  14.  

上边内补白是12px,左右边内补白是5%(相对于整个页面),下边内补白是0.
等价于下面的定义 

  1. p#twopaddings  
  2. {  
  3. padding-top-width:12px;  
  4. padding-right-width:5%;  
  5. padding-bottom-width:0;  
  6. padding-left-width:5%;  
  7. }  
  8. 为padding-width指定四个值  
  9. padding:padding-toppadding-rightpadding-bottompadding-left;  
  10. p#fourpaddings  
  11. {  
  12. padding:12px5%-12pxauto;  
  13. }  
  14.  

上边内补白是12px,右边内补白是5%(相对于整个页面),下边内补白是-12px,左边内补白将根据浏览器自动调整.

如果padding属性后面跟随四个值,那么值的分配顺序是从上面开始以顺时针旋转分配.
等价于下面的定义 

  1. p#fourpaddings  
  2. {  
  3. padding-top-width:12px;  
  4. padding-right-width:5%;  
  5. padding-bottom-width:-12px;  
  6. padding-left-width:auto;  
  7. }  
  8.  

【编辑推荐】

  1. SS兼容:如何兼容IE7和IE8揭秘
  2. CSS样式表:详解IE7新支持的选择器
  3. IE6 IE7 IE8三个版本的CSS兼容速查手册
  4. IE6下使用CSS定义DIV高度行之有效的办法
  5. 技术前沿 一段JS代码轻松解决IE6-IE8的兼容性问题


 

责任编辑:佚名 来源: jb51.net
相关推荐

2010-08-23 13:05:16

padding-lef

2010-08-23 15:33:47

CSSpadding

2010-08-23 08:45:08

CSSpadding内边距

2010-08-25 13:33:55

CSSpadding

2010-08-23 13:12:10

padding-rig

2010-08-20 14:58:26

CSSpadding

2010-08-30 11:34:32

csspadding

2010-08-25 10:10:30

CSSmargin

2010-09-08 09:11:32

CSSmargin

2010-08-25 14:26:09

CSSdisplay

2010-08-26 10:08:50

CSSmargin

2010-08-23 13:40:46

CSSpadding-bot

2010-09-16 11:02:56

CSS padding

2010-08-23 09:16:21

CSSpadding-bot

2010-08-23 09:11:18

padding-bot

2010-08-23 11:16:25

padding-lef

2010-08-20 16:29:01

padding-lef

2010-08-23 13:45:28

padding-botCSSpadding-rig

2010-08-20 15:56:58

padding-toppadding-lefCSS

2010-08-25 08:57:33

marginpadding
点赞
收藏

51CTO技术栈公众号