css padding 屬性

padding與元素尺寸

css中默認的box-sizing是content-box，因此使用padding在定寬元素中會增長元素尺寸。可使用box-sizing：border-box或者採用無寬度以及寬度分離原則（推薦使用）。

當使用box-sizing：border-box在某些狀況下仍是會改變元素尺寸的，例如：當padding足夠大時，width會失效。裏面的內容表現爲「首選最小寬度」,對於塊狀元素而言

.box{
　　width:80px;
　　padding:20px 60px;
　　box-sizing:border-box        
}

padding與內聯元素

因爲內聯元素垂直方向的行爲表現徹底受line-height和vertical-align的影響，在設置padding時，視覺上並無改變上一行下一行內容的間距。所以給咱們感受垂直padding沒有起做用。若是給內聯元素加上背景色能夠發現尺寸空間確實受padding影響，可是對上下元素的佈局沒有任何影響，牢牢是垂直方向上發生了重疊。

    div {
           background: red;
    }
    a{
            margin-left: 100px;
            width: 80px;
            padding: 20px 60px;
            background-color: #abcdef;
    }

    <div>sdf</div>
    <a class="box">連接</a>
    <div>sdf</div>

 

 

 

css還有不少場景會出現這種不影響其餘元素佈局而是出現層疊效果的現象，例如，relative元素的定位，盒陰影box-shadow，outline等，這些層疊如今看似相似，但有區別，分爲兩類：一類時純視覺層疊，不影響外部尺寸，另外一類則是會影響外部尺寸。box-shadow和outline屬於前者，而這裏的inline元素的padding屬於後者，當給父容器設置overflow：auto，層疊區域超出父容器時會出現滾動條。

padding對css的應用：

1.首先咱們能夠在不影響佈局的狀況下，優雅的增長連接按鈕的點擊區域大小。例如，文章中會有一些文字連接，默認狀況下，這些連接的點擊區域的高度受font-size字體大小控制的，和行高沒有關係，要是在移動端，咱們的手指不必定可以一次點中，此時就有必要增長連接的點擊區域大小，可是要在不影響佈局的狀況下，此時使用padding自然實現咱們想要的效果。但若是爲了增長點擊區域設置成inline-block，設置line-height，就會出現行間距等不少麻煩。

2.利用內聯元素的padding實現高度可控的分割線。傳統偷懶的方式多是直接使用「管道符」|如：登陸|註冊。但使用管道符，由於是字符，因此高度不可控，若是對視覺呈現要求比較高，就須要進行css圖形模擬，其中的方法之一能夠藉助內聯元素和padding屬性來實現。

a + a::before{
    content: "";
    padding: 10px 3px 1px;
    font-size: 0;
    border-left: 1px solid gray;
    margin-left: 6px;
}
<a href="#">登陸</a><a href="#">註冊</a>

padding的屬性值

不支持負值，支持百分比。padding的百分比值在水平方向和豎直方向均是相對於寬度計算的。

padding與圖形繪製

1.不使用僞元素，僅一層標籤實現大隊長「三道槓」分類圖標效果

 

.icon-menu{
    display: inline-block;
    width: 140px;
    height: 10px;
    padding: 35px 0;
    border-top: 10px solid;
    border-bottom: 10px solid;
    background-color: currentColor;
    background-clip: content-box;
}

 

2.不使用僞元素，僅一層標籤實現雙層原點效果

 

.icon-menu{
    display: inline-block;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 10px solid;
    border-radius: 50%;
    background-color: currentColor;
    background-clip: content-box;
}