CSS保健室｜padding

前言

如果 div 是一間練團室，那 padding 就是裡面的隔音棉了，輸入的數值越大，裡面的空間就會越小，團員之間的感情就會越好？！哈哈哈， padding 在網頁設計使用頻率很高，且語法輸入上也不難，快一起來學習吧。

（ 圖片來源 ）

可以先看看入門的 F2E合作社｜Bootstrap 5 網頁框架開發入門｜共用項目 margin 與 padding 再回頭看看我喔！

padding

padding 簡寫屬性在一個聲明中設置所有內邊距屬性，控制元素內部 content 與 border 之間的距離。該屬性可以有 1 到 4 個值。

padding-bottom

padding-bottom 設置元素的下內邊距。

padding-left

padding-left 設置元素的左內邊距。

padding-right

padding-right 設置元素的右內邊距。

padding-top

padding-top 設置元素的上內邊距。

需要注意

1. padding 不能是負數的

2. 用 margin 還是用 padding

何時使用 margin ：

1. 需要在 border 外側添加空白時。
2. 空白處不需要背景（ 色 ）時。
3. 上下相連的兩個盒子之間的空白，需要相互抵消時。如 15px + 20px 的 margin ，將得到 20px 的空白。

何時使用 padding ：

1. 需要在 border 內測添加空白時
2. 空白處需要背景（ 色 ）時
3. 上下相連的兩個盒子之間的空白，希望等於兩者之和時。如 15px + 20px 的 padding ，將得到 35px 的空白。

3. padding 撐開尺寸的用途

右豎線

HTML

<div class="box">
    <span>
        登入
    </span>
    <span>
        註冊
    </span>
    <span>
        退出
    </span>
</div>

CSS

.box span {position: relative;font-size: 16px;}
.box span::after {
    content: "";
    margin-left: 10px;
    padding: 13px 6px 3px;
    /* padding-top + padding-bottom 的值剛好是文字大小的話，直線就會和文字一樣高 */
    font-size: 0;
    border-left: 2px solid rgb(218, 218, 218);
}
.box span:last-child::after {display: none;}

偽元素的 font-size 為 0 ，所以高度為 0 ，然後 padding 上下值撐開自身佔據的上下尺寸

4. 用 padding 繪製小圖標

標靶

HTML

<div class="icon">
    <div class="concentric_circles"></div>
</div>

CSS

.concentric_circles{
    width: 100px;
    height: 100px;
    padding: 30px;
    border: 20px solid cyan;
    border-radius: 50%;
    background-color: cyan;
    background-clip: content-box;
}

漢堡鈕

HTML

<div class="icon">
    <div class="bars"></div>
</div>

CSS

.bars {
    width: 200px;
    margin: 30px auto;
    padding: 30px 0;
    height: 30px;
    border-top: 30px solid cyan;
    border-bottom: 30px solid cyan;
    background: cyan;
    background-clip: content-box;
}

參考資料

1. CSS中的margin、border、padding區別
2. CSS padding 属性
3. css笔记 - 张鑫旭css课程笔记之 padding 篇