深入理解padding

Posted 2020-10-17 niusan

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 id="btn"></button><lable for="btn">按钮</lable>
               lable { display: inline-block;line-height: 20px;padding: 10px; }
4，padding与图形绘制
   <div class="line-tri"></div> 
   .line-tri {
      height: 30px;
      width: 150px;
      padding: 15px 0;
      border-top: 30px solid;
      border-bottom: 30px solid ;
      background-color: currentColor;
      -webkit-background-clip: content-box;
      -moz-background-clip: content-box;
      background-clip: content-box;
   }

      <div class="eye"></div>
      .eye {
         width: 150px;height: 150px;
         padding: 10px;
         border: 10px solid;
         border-radius: 50%;
         background-color: currentColor;
         -webkit-background-clip: content-box;
         -moz-background-clip: content-box;
         background-clip: content-box;
      }
5,padding与布局
   1，使用百分比单位构建固定比例布局
         移动端1:1头布局 div {padding: 50%;}
   2，配合margin等高布局
.box{
   overflow: hidden;
   resize:vertical;
}
.child-orange,.child-green{margin-bottom: -600px;padding-bottom: 600px;}
.child-orange{
   float: left;background: orange;
}
.child-green{
   float: left;background: green;
}很大的margin-bottom负值，很大的padding-bottom填充缺失空间

   3，两栏自适应布局
      <div>
         <img src="123.jpg">
         <div class="auto"></div> 
      </div
         img { float: left; }
         .auto { padding-left: 120px; }