CSS深入理解之padding

第一节： CSS padding与容器的尺寸

一.  对于block水平元素。

1. padding值暴走，一定会影响尺寸；

2. width非auto（有固定值），padding影响尺寸；

3. width为auto或box-sizing为border-box，同时padding值没有暴走（值比较小），不影响尺寸；

二.  对于inline水平元素：水平padding影响尺寸，垂直padding不影响尺寸，但是会影响背景色（占据空间）。

应用：高度可控的分隔线

1. 直接使用字符：注册 | 退出登录

2. inline-block控制： 注册 | 退出登录

3. 使用inline padding ：注册｜退出登录

　　注册<span></span>退出登录　

       span{ padding:16px 6px 1px ; margin-left :12px; border-left:2px solid; font-size:0; }

第二节：CSS padding负值和百分比值

一.  padding 不支持任何形式的负值。

二.  padding百分比均是相对于宽度计算的。

应用：轻松实现一个正方形  div { padding： 50% }

三.  inline水平元素的padding百分比值。

1. 同样相对于宽度计算。

2. 默认的高度宽度细节有差异。

3. padding会断行。

第三节： 标签元素内置padding

一.  ol/ul列表

1. ol/ul 元素内置padding-left ， 但是单位是px不是em；

2. 例如Chrome浏览器下是40px ；

3. 所以如果字号很小，间距就会很开；

4. 所以如果字号很大，序号会爬到容器外面；

备注：文字大小一般为12px~14px ，padding-left 为22px~25px，基本可以实现序号与下面的内容对齐。

二.  表单元素的内置padding

1. 所有浏览器input/textarea输入框内置padding；

2. 所有button按钮内置padding；

3. 部分浏览器select下拉内置padding，如FireFox、IE8+可以设置padding；

4. 所有浏览器radio/checkbox单复选框内无内置padding；

5. button 按钮元素的padding最难控制；

1）. Chrome浏览器 padding设为0有效；

2）. FireFox浏览器设置padding：0左右依旧有padding；可以用button::-moz-focus-inner { padding:0 }设置padding为0。

3）. IE浏览器：IE7文字越多，左右padding逐渐变大！可以设置button { overflow： visible; }使左右padding为0；

4）. padding与高度计算的不兼容。

button{

  line-height: 20px;

  padding: 10px;

  border :  none;

}

高度：

• IE7:          45px;   ?
  
• IE8+:        40px;
• FireFox:    42px;  ？
  
• Chrome:   40px;
  

建议：<button id="btn"></button> <label for="btn">按钮</label>

           label{

              display: inline-block;

               line-height: 20px;

               padding:  10px;    

            }

高度：

• IE7:           40px;  
  
• IE8+:         40px;
• FireFox:    40px;
  
• Chrome:   40px;

第四节： padding与图形绘制

第五节：padding布局实战——padding在布局这块一些比较好的应用

一. 使用百分比单位构建固定比例布局结构

二.  配合margin等高布局

三. 两栏自适应布局

                

备注：以上内容来自http://www.imooc.com/learn/710