作為前端開發人員，了解和掌握CSS的各種屬性和方法是非常必要的。而其中一個關鍵的屬性就是CSS中的“距離”，也稱為“間距”或“外邊距與內邊距”。

CSS中的距離可以通過margin、padding等屬性來設置。它們的作用分別是外邊距和內邊距的定義。具體來說，margin表示元素的邊框與周圍元素之間的距離，而padding則表示元素的內容與元素邊框的距離。

在使用margin和padding屬性時，我們需要注意它們的取值范圍。這些屬性支持多種單位，包括像素、百分比、長度和auto等。其中，像素單位最為常用，一般用于固定間距的設置；百分比單位則適用于相對長度的設置。

例如，可以通過以下代碼設置一個元素的margin為20像素：
div {
margin: 20px;
}
或者是將padding設置成該元素寬度的10%：
div {
padding: 10%;
}

此外，在頁面布局中，我們還需要掌握盒模型的相關知識。每個元素都有四個邊框：上下左右。盒模型是通過將這些邊框圍成一個矩形來描述元素的尺寸和屬性屬性。其中，盒模型的外邊距和內邊距可以對頁面的布局產生巨大影響。

例如，在進行響應式布局時，可以通過修改內邊距和外邊距來使元素在不同屏幕尺寸下具有不同的大小和間距。
@media screen and (max-width: 768px) {
div {
margin: 10px;
padding: 5px;
}
}
@media screen and (min-width: 768px) {
div {
margin: 20px;
padding: 10px;
}
}

總之，在CSS中，距離是頁面布局中不可或缺的一個重要屬性。通過合理設置元素的margin和padding等距離屬性，可以使頁面更具美感和實用性。