CSS填充和邊界是用于控制HTML元素內部和周圍留白的屬性。通過設置填充和邊界，可以使頁面布局更加美觀、易讀。下面我們來詳細學習CSS填充和邊界的使用。

首先，我們先來學習填充的使用。填充指的是HTML元素內部留白的寬度，可以通過padding屬性來設置。padding屬性有四個值，分別對應于上下左右四個方向的留白寬度。例如：

p {
padding: 10px; /* 上下左右都是10px的內邊距 */
}
div {
padding: 10px 20px; /* 上下10px，左右20px的內邊距 */
}
h1 {
padding: 5px 10px 15px 20px; /* 上5px，右10px，下15px，左20px的內邊距 */
}

接下來，我們來學習邊界的使用。邊界指的是HTML元素周圍的線框樣式，可以通過border屬性來設置。border屬性有三個值，分別對應于寬度、類型和顏色。例如：

p {
border: 1px solid red; /* 1px寬，實線，紅色的邊框 */
}
div {
border-width: 2px; /* 2px的邊框寬度，邊框類型和顏色默認 */
}
h1 {
border: 3px dotted green; /* 3px寬，點狀線，綠色的邊框 */
}

除了可以單獨設置填充和邊框外，還可以合并設置。例如：

p {
padding: 10px;
border: 1px solid red;
}
div {
padding: 10px 20px;
border-width: 2px;
border-color: blue;
}
h1 {
padding: 5px 10px 15px 20px;
border: 3px dotted green;
}

通過以上學習，我們可以更好的掌握CSS填充和邊界的使用，讓頁面呈現更加美觀、易讀的效果。