# CSS中怎么使用padding-bottom屬性
## 一、padding-bottom基礎概念
`padding-bottom`是CSS中用于設置元素**底部內邊距**的屬性，屬于盒模型的重要組成部分。它定義了元素內容與底部邊框之間的空白區域，不影響元素本身尺寸但會影響布局空間占用。
### 基本語法
```css
selector {
padding-bottom: length | percentage | inherit;
}
| 值類型 | 說明 | 示例 |
|---|---|---|
| 固定長度值 | 使用px/em/rem等單位 | padding-bottom: 20px |
| 百分比值 | 相對于父元素寬度計算 | padding-bottom: 10% |
| inherit | 繼承父元素的padding-bottom值 | padding-bottom: inherit |
.article {
padding-bottom: 2em; /* 文章底部保留2倍字體高度的空白 */
}
通過配合height: 0實現比例固定：
.aspect-ratio-box {
height: 0;
padding-bottom: 56.25%; /* 16:9比例 (9/16=0.5625) */
position: relative;
}
.btn {
padding-bottom: 8px;
transition: padding-bottom 0.3s;
}
.btn:hover {
padding-bottom: 12px; /* 懸停時增加底部內邊距 */
}
box-sizing: border-box模式下，padding會占用元素聲明寬度所有主流瀏覽器均完全支持padding-bottom屬性，包括： - Chrome 1+ - Firefox 1+ - Safari 1+ - Edge 12+ - IE 4+（部分早期版本百分比計算有差異）
calc()函數進行復雜計算：
.container {
padding-bottom: calc(20px + 5%);
}
通過合理運用padding-bottom，可以顯著提升頁面的視覺層次感和交互體驗。 “`
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
