<div>與<div>之間的距離是通過設置CSS樣式來控制的，具體來說是通過設置margin、padding和border等屬性來實現的。在HTML中，<div>元素是一個塊級元素，它可以用來創建一個獨立的區塊，用來容納其他HTML元素。通過設置<div>之間的距離，我們可以調整頁面布局、創建水平或垂直間距，以及實現各種其他設計需求。
下面以幾個代碼案例來詳細說明如何設置<div>與<div>之間的距離。
代碼案例1：

<style>
.container {
display: flex; /* 設置為彈性布局 */
justify-content: space-between; /* 讓各個<div>之間自動平均分布距離 */
}
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<br>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

在這個案例中，我們使用了flex布局，并設置了justify-content: space-between;。這個屬性能夠讓各個<div>之間自動平均分布距離，不論<div>的數量是多少。這樣，每個<div>之間的距離都會有相同的大小。
代碼案例2：

<style>
.container {
display: grid; /* 設置為網格布局 */
grid-template-columns: repeat(3, 1fr); /* 將容器分割為三個等寬列 */
}
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<br>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

在這個案例中，我們使用了grid布局，并設置了grid-template-columns: repeat(3, 1fr);，將容器分割為三個等寬列。每個<div>都會處于一個不同的列中，且列之間的距離是相等的。
代碼案例3：

<style>
.box {
width: 100px;
height: 100px;
margin-bottom: 20px; /* 設置下邊距為20px */
background-color: red;
}
</style>
<br>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

在這個案例中，我們直接給每個<div>設置了下邊距margin-bottom: 20px;，這樣每個<div>之間就會有20px的距離，從而實現了<div>之間的間隔。
通過上述代碼案例，我們可以看到，通過不同的CSS屬性和布局方式，我們可以實現<div>與<div>之間距離的不同設置。這些方法具有靈活性，可以根據具體需求來調整和應用。在實際應用中，我們可以根據設計要求和頁面布局需求選擇適合的方式來設置<div>之間的距離，從而實現我們想要的頁面效果。