淺談padding

深入淺出padding

padding是CSS盒子模型的一部分，代表盒子模型的內邊距。

用法

padding屬性有四個值，分別代表上、右、下、左的內邊距。

.box {
  padding: 10px 5px 15px 20px;
}

此時，.box的內邊距為：

• 上內邊距：10px
• 右內邊距：5px
• 下內邊距：15px
• 左內邊距：20px

簡寫

padding屬性的值可以簡寫，按照值的數量可以分為三種情況：

1.單個值

.box {
  padding: 10px;
}

此時，.box的內邊距為：

• 上內邊距：10px
• 右內邊距：10px
• 下內邊距：10px
• 左內邊距：10px

2.兩個值

.box {
  padding: 10px 5px;
}

此時，.box的內邊距為：

• 上內邊距：10px
• 右內邊距：5px
• 下內邊距：10px
• 左內邊距：5px

3.三個值（重點）

.box {
  padding: 10px 5px 15px;
}

此時，.box的內邊距為：

• 上內邊距：10px
• 右內邊距：5px
• 下內邊距：15px
• 左內邊距：5px

tips：實際使用時，大多數人都會使用單個值、兩個值、四個值的寫法，三個值的寫法常常被忽略，所以需要重點瞭解三個值的簡寫寫法。

特性

1.行內元素設置的內邊距不會影響行高計算

當對行內元素設置內邊距時，內邊距不會影響內聯元素的行高，但是會撐開背景。

<span class="text">我是行內元素</span>
<div class="text-bottom">朕的背景！！！</div>

span {
    padding: 10px;
    background: #cccccc;
}

.text-bottom {
    height: 200px;
    background: #000;
}

效果如下：

可以發現：行高並沒有變化，背景按內邊距撐開的面積顯示，細心的話可以發現，背景延伸到了其他行，併發生了重疊，並沒有擠開其他行，這也進一步說明瞭行高並沒有改變。

2.不允許使用負值

padding不像margin可以使用負值，因為，margin再怎麼用，也不會影響盒模型的寬度、高度，而padding身為盒模型的內邊距，會直接影響盒模型的寬度、高度。並且，padding設為負值並沒有意義，直接修改content一樣可以達到效果。

可能的值

tips：padding常用的寫法是使用length，比如padding: 10px。但是，有時使用百分比可以實現一些騷操作，比如實現一個自適應的正方形：

.box {
    float: left;
    width: 100%;
    padding-bottom: 100%;
    background: #cccccc;
}

效果如下：

可以看到，通過padding-bottom: 100%實現了一個自適應的正方形。