<div style="text-align: justify;">

CSS是一種用于網頁設計和布局的語言，它可以通過樣式表來控制網頁元素的外觀和排版。在網頁布局中，我們經常會遇到子div和父div之間的間距問題。理解和掌握如何處理這種間距是很重要的，因為它直接影響到網頁的整體布局和視覺效果。

在CSS中，子div和父div之間的間距是由各種因素共同決定的，包括邊框、外邊距和內邊距。下面通過幾個代碼案例來詳細解釋和說明。

案例1：設置子div的外邊距

在這個案例中，我們有一個父div和一個子div。父div和子div的代碼如下所示：

<div class="parent">
<div class="child">子div</div>
</div>

我們可以通過CSS來設置子div的外邊距。如果我們希望子div與父div之間有一定的間距，可以對子div添加外邊距屬性：

.child {
margin: 10px;
}

在這個例子中，我們將子div的外邊距設置為10像素，這樣子div和父div之間就會有一個10像素的間距。

案例2：設置子div的內邊距

除了外邊距，我們還可以通過設置子div的內邊距來實現子div和父div之間的間距。內邊距是指元素內部邊界與內容之間的距離。

.child {
padding: 10px;
}

在這個例子中，我們將子div的內邊距設置為10像素，這樣子div和父div之間就會有一個10像素的間距。

案例3：設置父div的背景顏色

另一種通過設置父div來實現子div和父div之間的間距的方法是設置父div的背景顏色。

.parent {
background-color: #f1f1f1;
}

在這個例子中，我們將父div的背景顏色設置為灰色，這樣就在子div和父div之間增加了一個視覺上的間距。

通過設置子div的外邊距、內邊距或者父div的背景顏色，我們可以實現子div和父div之間的間距。這些方法可以根據具體的需求和設計要求進行靈活的使用，以達到最佳的布局和視覺效果。

</div>