前言
如果 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 設置元素的上內邊距。
值 | 描述 |
---|---|
auto | 瀏覽器計算內邊距。 |
length | 規定以具體單位計的內邊距值,比如像素、公分等。默認值是 0px 。 |
% | 規定基於父元素的寬度的百分比的內邊距。 |
需要注意
1. padding 不能是負數的
2. 用 margin 還是用 padding
何時使用 margin :
- 需要在 border 外側添加空白時。
- 空白處不需要背景( 色 )時。
- 上下相連的兩個盒子之間的空白,需要相互抵消時。如 15px + 20px 的 margin ,將得到 20px 的空白。
何時使用 padding :
- 需要在 border 內測添加空白時
- 空白處需要背景( 色 )時
- 上下相連的兩個盒子之間的空白,希望等於兩者之和時。如 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;
}