1，padding與元素的尺寸，
   1),對于block水平元素，
      1，padding值暴走，一定會影響尺寸，
      2，width非auto,padding影響尺寸，
      3，width為auto或box-sizing為border-box，同時padding值沒有暴走，不影響尺寸。
   2),對于in-line水平元素   
      1,水平padding影響尺寸，垂直padding不影尺寸，但是會影響背景色（占據(jù)空間）

   應用：高度可控的分割線
      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負值和百分比值
   關(guān)于padding負值： 不支持任何形式的負值。
   關(guān)于padding百分比值：百分比均是相對于寬度計算的
      應用：正方形  div {padding: 50%;} 
   inline水平元素的padding百分比值
      1，同樣相對于寬度計算，
      2，默認的高度寬度細節(jié)有差異
      3，padding會斷行  會讓規(guī)范中的strut出現(xiàn)，讓高比寬更大。
3，標簽元素的內(nèi)置padding
      ol/li元素內(nèi)置padding-left，但是單位是px；
      所有瀏覽器input/textarea輸入框內(nèi)置padding
      所有瀏覽器button按鈕內(nèi)置padding
      部分瀏覽器select下拉內(nèi)置padding,比如FireFox IE8+ 可以設置padding
      所有林瀾起radio/checkbox但復選框無內(nèi)置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;
       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 {
          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，使用百分比單位構(gòu)建固定比例布局
         移動端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; }

總結(jié)

以上是生活随笔為你收集整理的深入理解padding的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。