CSS 中 預設的box-sizing 是content-box ,使用padding 會增加元素的尺寸
有的認為 全域性設定box-sizing : border-box 元素尺寸就不會發生變化，實際中大多數情況下是這樣的，但是 如果當padding值 足夠大，那width也就無能為力了

  <style>
        *{
            box-sizing:border-box;
        } 
        #box{
            width: 80px;
            /*
             當padding足夠大時候，width無效，最終寬度為120px 
             裡面的內容則 表現為 "首選最小寬度"
              
 
*/
            padding: 20px 60px;
            background-color: red;
        }
    </style>

    <div id="box"></div>

內聯元素的padding 不僅會影響水平方向 ，也會影響垂直方向
垂直方向的行為完全受line-height 和 vertical-align 的影響，只是視覺上沒有改變 和 上一行下一行內容的間距 ，給人感覺就是垂直padding是沒有起作用的
如果給內聯元素加背景 或 邊框，就能看到尺寸空間確實受padding影響

尺寸雖有效，但對上下元素原本佈局卻沒有任何影響，僅僅是垂直方向發生了層疊
css中還有其他場景 或 屬性會出現這種不影響其他元素佈局而是出現層疊的效果的現象
層疊現象看似相似，但實際也是有區分的
分兩類
1，純視覺層疊，不影響外部尺寸 如box-shadow outline
2，會影響外部尺寸 ，如inline元素

區分方法：
如果父容器overflow:auto 層疊區域超出父容器的時候，沒有滾動條出現，則是純視覺的
如果出現滾動條，則會影響尺寸，影響佈局

所以內聯元素padding 對視覺層 和佈局層具有雙重影響

內聯padding在實際中的應用
1，增加連結按鈕的點選區域大小 ，對現有的佈局無影響，可以使用padding 來實現 ，如果用inline-block 則行間距等會有很大麻煩事出來

  <style>
        article a{
            display:inline-block;
            text-decoration: none;
            background-color: red;
            color:#fff;
            padding:2px 8px;
        }
     
    </style>

    <article>
        <a href="#">連結</a>
    </article> 
 

2，利用內聯元素的padding 實現高度可控的分隔線 ，傳統偷懶的方法可能是直接使用 "管道符" 如 登入 | 註冊 . 管道符 因為是字元 所有高度是不可控的


3. 標題距離頁面的頂部有一段距離 如頁面正好有一個50px高的position:fixed 的導航欄，
如果塊元素設定padding-top:50px 會影響佈局，但內聯元素不會