在網頁設計中，CSS 是一個非常重要的組件。利用 CSS 我們可以很方便地調整樣式、布局等網頁效果。其中，控制組件之間的距離也是一個非常重要的技巧，本文將介紹 CSS 中控制組件之間距離的方法。

我們可以使用 margin（外邊距） 和 padding（內邊距） 來控制組件之間的距離。需要注意的是，這兩者雖然表現方式類似，但是它們的作用對象不同。margin 作用于外邊框，padding 則作用于內邊框。

.box {
margin: 10px;
padding: 10px;
}

上面的代碼表示，距離元素邊緣 10px 以內的距離為 margin，距離元素內容區域邊緣 10px 以內的距離為 padding。如果我們只想控制某一側的距離，如下面這個例子：

.box {
margin-top: 10px;
}

上面的代碼表示，只控制元素上方 10px 的 margin。如果我們要控制多個元素之間的距離，可以使用下面這個例子：

.box1 {
margin-bottom: 10px;
}
.box2 {
margin-top: 10px;
}

上面的代碼表示，控制 box1 元素與下面元素的距離為 10px，控制 box2 元素與上面元素的距離為 10px。

總而言之，在網頁設計中，控制組件之間的距離是非常重要的技巧。通過使用 margin 和 padding 來實現，可以非常方便地實現各種布局效果。