<div 距離左側是指在網頁布局中，使用div元素時，該元素與瀏覽器窗口或其他父元素左側的距離。這個距離可以通過CSS屬性來控制，例如使用margin-left或padding-left屬性可以改變元素與左側的距離。在本文中，我們將通過幾個代碼案例來詳細解釋和說明div距離左側的用法和效果。
，讓我們來看一個簡單的代碼示例，通過設置margin-left屬性來改變div與左側的距離。代碼如下：

<style>
.box {
margin-left: 100px;
}
</style>
<br>
<div class="box">
這是一個距離左側100px的div。
</div>

在上面的代碼中，我們使用了CSS樣式表中的margin-left屬性，將左側的距離設置為100px。當瀏覽器渲染這段代碼時，div元素會根據這個屬性值來調整其與左側的距離。運行代碼后，我們可以看到div元素與左側的距離為100px。
接下來，讓我們看一個使用padding-left屬性的案例。代碼如下：

<style>
.box {
padding-left: 50px;
}
</style>
<br>
<div class="box">
這是一個距離左側距離有50px的div。
</div>

在上述代碼中，我們使用了CSS樣式表中的padding-left屬性，將左側的距離設置為50px。padding屬性指定了元素內邊距的大小，padding-left則表示元素的左側內邊距的大小。當瀏覽器渲染這段代碼時，div元素的內容會相對于其內邊距位置進行布局，從而使div元素與左側的距離增加為50px。
除了使用margin-left和padding-left屬性來改變div與左側的距離外，還可以通過調整父元素的位置來影響div的位置。接下來，我們將看一個示例代碼，通過設置父元素的position屬性為relative，再調整div的left屬性來改變其與左側的距離。代碼如下：

<style>
.parent {
position: relative;
}
.box {
position: absolute;
left: 50px;
}
</style>
<br>
<div class="parent">
<div class="box">
這是一個距離左側距離有50px的div。
</div>
</div>

在上面的代碼中，我們將父元素的position屬性設置為relative，這樣其子元素div的位置可以相對于父元素進行調整。然后，我們設置了子元素div的position屬性為absolute，并通過left屬性將其與左側的距離設置為50px。當瀏覽器渲染這段代碼時，div元素會根據父元素和自身的位置屬性來調整其與左側的距離。運行代碼后，我們可以看到div元素與左側的距離為50px。
通過以上幾個案例，我們可以看到div與左側的距離可以通過margin-left、padding-left以及position屬性來進行調整。這些調整可以根據具體需求來靈活應用于網頁布局和設計中。通過合理地調整與左側的距離，我們可以實現各種各樣的界面效果，提升用戶體驗。