深入理解padding

1，padding与元素的尺寸，
   1),对于block水平元素，
      1，padding值暴走，一定会影响尺寸，
      2，width非auto,padding影响尺寸，
      3，width为auto或box-sizing为border-box，同时padding值没有暴走，不影响尺寸。
   2),对于in-line水平元素   
      1,水平padding影响尺寸，垂直padding不影尺寸，但是会影响背景色（占据空间）

   应用：高度可控的分割线
      1，直接使用字符： 注册 | 退出
      2，inline-block控制：  注册 | 退出
      3，inline padding ：  注册 | 退出     
            注册<span></span>退出
            span { padding:16px 6px 1px; margin-lefft:12px; border-left: 2px solid; font-size: 0; }
2,padding负值和百分比值
   关于padding负值： 不支持任何形式的负值。
   关于padding百分比值：百分比均是相对于宽度计算的
      应用：正方形  div {padding: 50%;} 
   inline水平元素的padding百分比值
      1，同样相对于宽度计算，
      2，默认的高度宽度细节有差异
      3，padding会断行  会让规范中的strut出现，让高比宽更大。
3，标签元素的内置padding
      ol/li元素内置padding-left，但是单位是px；
      所有浏览器input/textarea输入框内置padding
      所有浏览器button按钮内置padding
      部分浏览器select下拉内置padding,比如FireFox IE8+ 可以设置padding
      所有林澜起radio/checkbox但复选框无内置padding
         button按钮元素的padding最难控制！！！
            Chrome:  button {padding:0;}
            FireFox : button::--moz-focus-inner  { padding: 0; } 
            IE7 文字中越多，左右padding逐渐变大  button { overflow:visible; }
         padding与高度计算不兼容
            button {line-height: 20px;padding: 10px;border:none;}
            IE7: 45px;  IE8+:40px; FireFox:42px; Chrome:40px;
            button表单提交按钮解决方案：
               <button ></div> 
      </div
         img { float: left; }
         .auto { padding-left: 120px; }