CSS是網頁制作中不可或缺的樣式語言，它可以控制網頁的布局、字體、顏色以及元素之間的距離等等。其中，垂直距離的控制尤為重要。在這篇文章中，我們將討論一些常見的垂直距離控制技巧。

/* 1. 行高（line-height）控制垂直居中 */
.box {
height: 80px;
line-height: 80px;
}
/* 2. margin 和 padding 控制元素之間的距離 */
.box1 {
margin-top: 20px;
}
.box2 {
padding-top: 20px;
}
/* 3. Flex 布局實現元素居中 */
.container {
display: flex;
align-items: center;
justify-content: center;
}
/* 4. 偽元素實現元素間距 */
.box::before {
content: "";
display: block;
height: 20px;
}
/* 5. vertical-align 實現元素垂直居中 */
img {
display: inline-block;
vertical-align: middle;
margin-right: 20px;
}
/* 6. 負邊距實現元素之間的距離 */
.box3 {
margin-bottom: -20px;
}
.box4 {
margin-top: 20px;
}
/* 7. absolute 定位實現元素上下居中 */
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

以上是一些常用的 CSS 垂直距離控制技巧，我們可以根據實際需求選擇合適的方法。同時還需要注意選擇適當的單位（如像素、百分比、em 等）以及瀏覽器的兼容性。