<div>行距是指文本行與行之間的間距。在網頁設計和開發中，我們經常需要調整網頁元素之間的間距，以使頁面布局更好看，用戶閱讀更清晰舒適。其中，使用<div>元素可以實現行距的調整。</div>

下面我們通過幾個代碼案例來詳細解釋說明<div>行距</div>的應用。

案例一：通過設置margin屬性調整行距

在這個案例中，我們使用CSS的margin屬性來調整<div>元素之間的行距。

<div style= "margin-bottom: 20px;">
<p>這是第一個<div>元素的內容。</p>
</div>
<br>
<div style= "margin-bottom: 10px;">
<p>這是第二個<div>元素的內容。</p>
</div>
<br>
<div>
<p>這是第三個<div>元素的內容。</p>
</div>

通過設置margin-bottom屬性，我們可以很容易地調整<div>元素之間的行距。在上述代碼中，第一個<div>元素與第二個<div>元素之間的行距為20px，第二個<div>元素與第三個<div>元素之間的行距為10px。

案例二：使用偽類選擇器調整行距

在這個案例中，我們使用CSS的偽類選擇器:first-of-type來設置第一個<div>元素的行距。

<style>
div:first-of-type {
margin-top: 30px;
}
</style>
<br>
<div>
<p>這是第一個<div>元素的內容。</p>
</div>
<br>
<div>
<p>這是第二個<div>元素的內容。</p>
</div>
<br>
<div>
<p>這是第三個<div>元素的內容。</p>
</div>

通過使用偽類選擇器:first-of-type，我們可以選擇第一個<div>元素，并通過設置margin-top屬性來調整它與上方元素之間的行距。在上述代碼中，第一個<div>元素與上方元素之間的行距為30px。

案例三：使用CSS框架調整行距

在實際的網頁設計和開發中，我們經常使用CSS框架來快速搭建頁面，并調整元素之間的行距。

<link rel="stylesheet" >
<br>
<div class="mb-4">
<p>這是第一個<div>元素的內容。</p>
</div>
<br>
<div class="mb-2">
<p>這是第二個<div>元素的內容。</p>
</div>
<br>
<div>
<p>這是第三個<div>元素的內容。</p>
</div>

在上述代碼中，我們使用了Bootstrap CSS框架中的mb-4和mb-2類來設置<div>元素之間的行距。其中，mb-4表示下方元素與上方元素之間的行距為4個間距單位（通常為16px），mb-2表示下方元素與上方元素之間的行距為2個間距單位（通常為8px）。

通過上述案例的介紹，我們了解到了如何使用<div>行距來調整網頁元素之間的間距。無論是通過設置margin屬性、使用偽類選擇器還是使用CSS框架，都能夠靈活地實現行距的調整，讓頁面布局更加美觀。