在HTML中，<div>元素是一個塊級元素，用于在文檔中創建一個獨立的分區。通過CSS樣式，我們可以控制<div>元素的位置、大小和其他屬性。在本文中，我們將探討如何使用CSS來設置<div>元素的靠左距離。

在CSS中，我們可以使用"margin"屬性來設置元素的外邊距。外邊距定義了元素相對于其他元素的距離。通過設置左外邊距（margin-left），我們可以實現<div>元素的靠左距離。

下面是一些代碼案例，詳細說明了如何設置<div>元素的靠左距離：

案例1：

<style>
.left-margin {
margin-left: 20px;
}
</style>
<br>
<div class="left-margin">
這是一個示例文本。
</div>

在案例1中，我們使用了一個CSS類名"left-margin"來定義元素的樣式。通過設置margin-left的值為20px，我們讓<div>元素相對于左邊界向右移動了20個像素。

案例2：

<style>
#left-div {
margin-left: 50px;
}
</style>
<br>
<div id="left-div">
這是另一個示例文本。
</div>

在案例2中，我們使用了一個ID名"left-div"來定義元素的樣式。同樣地，通過設置margin-left的值為50px，我們讓<div>元素相對于左邊界向右移動了50個像素。

案例3：

<style>
.parent-div {
margin-left: 100px;
}
<br>
  .child-div {
margin-left: inherit;
}
</style>
<br>
<div class="parent-div">
這是一個父元素。
<div class="child-div">
這是一個子元素。
</div>
</div>

在案例3中，我們使用了兩個CSS類名"parent-div"和"child-div"。，我們給父元素設置了一個左外邊距為100px。然后，通過設置子元素的左外邊距為"inherit"，我們讓子元素繼承父元素的左外邊距值。因此，子元素也會相對于左邊界向右移動100個像素。

通過這些代碼案例，我們可以看到如何使用CSS來設置<div>元素的靠左距離。無論是通過類名還是ID名，我們都可以輕松地控制元素的外邊距，從而實現不同的元素布局效果。