CSS是前端開發中重要的一環，它可以有效地控制網頁的樣式和布局。其中，垂直和水平間距是影響網頁美觀度和用戶體驗的重要因素。

對于垂直間距，我們可以使用margin和padding來控制元素之間的距離。其中，margin指的是元素與元素之間的距離，而padding指的是元素內部與元素內容之間的距離。在設定垂直間距時，我們可以使用margin-top和margin-bottom來控制元素之間的距離。

.example {
margin-top: 20px;
margin-bottom: 20px;
}

對于水平間距，我們同樣可以使用margin來控制元素之間的距離。但是，在水平方向上，我們還可以使用float來實現元素的排列。顧名思義，float將元素浮動到頁面的左側或右側。在使用float時，我們需要注意元素的容器寬度，以及元素本身的寬度。

.container {
width: 100%;
overflow: hidden;
}
.example {
float: left;
width: 50%;
}

綜上所述，垂直和水平間距是網頁布局中重要的一環。通過靈活運用margin、padding和float等屬性，我們可以輕松地實現網頁元素的間距，讓頁面更加美觀，用戶體驗更好。