適當的padding 讓內容不擁擠，是視覺平衡與舒適感的關鍵

##為什麼要有這功能
padding 是網頁設計中不可或缺的一部分，控制元素內容與邊框之間的內部間距。適當的 padding 可以提升文字的可讀性，讓設計看起來更加舒適和協調。它為元素提供了一個緩衝區，避免內容與邊框太過貼近，讓視覺效果更加美觀。正確使用 padding 可以增強用戶的閱讀體驗，並提升整體佈局的結構感。

##核心結構
padding 控制的是元素內部的填充間距，它位於元素內容與邊框之間，可以分別設定上、右、下、左四個方向的內間距。與 margin 類似，padding 也可以指定單一數值來應用到四個方向，或是針對每個方向設置不同的值。

##主要功能
填充控制：padding 可以用像素 (px)、百分比 (%)、em 等單位來表示，根據需要設置內部的填充間距。
方向控制：可以單獨控制上、右、下、左四個方向的填充距離，靈活調整元素內部空間的分佈。
響應式設計：利用百分比 padding 可以設計出響應式佈局，適應不同螢幕尺寸。

##注意事項
padding 的值會影響元素的實際大小，因為它會在元素內部增加空間，這可能會影響到頁面中的其他元素位置。
使用百分比值時，padding 是相對於父元素的寬度計算，而非高度。
與 margin 不同，padding 的負值是無效的，無法設定負的填充距離。

##簡單範例應用

<Style>
/* 基本的內間距設定 */
.box {
    width: 200px;  /* 區塊寬度 */
    height: 100px; /* 區塊高度 */
    background-color: lightblue; /* 區塊背景色 */
    padding: 20px; /* 四個方向均設置 20px 的內部填充距離 */
}

/* 設置不同方向的內部填充距離 */
.another-box {
    width: 150px;  
    height: 80px;  
    background-color: lightgreen;
    padding-top: 30px;    /* 上方內部填充距離 30px */
    padding-right: 10px;  /* 右方內部填充距離 10px */
    padding-bottom: 15px; /* 下方內部填充距離 15px */
    padding-left: 5px;    /* 左方內部填充距離 5px */
}

/* 使用百分比來設置內部填充 */
.responsive-box {
    width: 50%;  /* 寬度為父元素的 50% */
    height: 100px;
    background-color: lightcoral;
    padding: 5%; /* 內部填充距離為寬度的 5% */
}
</Style>