<div 不貼邊
<div></div> 是HTML中的一種元素，用于創建一個塊級盒子。通常情況下，<div>元素會完全貼邊其所在容器的邊緣。然而，有時候我們可能希望在布局中給<div>元素一些留白，以增加視覺效果或者與其他元素產生一定的間距。本文將詳細討論如何使用CSS來實現<div>元素不貼邊的效果，并給出一些代碼案例作為示例。

案例一：使用內邊距

使用內邊距（padding）是最簡單和常見的方法來使<div>元素不貼邊。通過為<div>元素指定一定的內邊距，可以在元素周圍留下空白區域。

.box {
padding: 10px;
}

上述代碼中，我們為<div>元素添加了10像素的內邊距。這將在<div>元素的四周創建一個10像素的留白區域。

案例二：使用外邊距

使用外邊距（margin）是另一種常用的方法來使<div>元素不貼邊。通過為<div>元素指定一定的外邊距，可以在元素周圍創建一定的間距。

.box {
margin: 10px;
}

上述代碼中，我們為<div>元素添加了10像素的外邊距。這將在<div>元素的外部創建一個10像素的間距。

案例三：使用相對定位

通過使用相對定位（position: relative），可以在布局中對<div>元素進行微調，使其不貼邊。

.box {
position: relative;
top: 10px;
left: 10px;
}

上述代碼中，我們為<div>元素指定了相對定位，并且將其向下和向右移動了10像素。這樣，<div>元素就會在布局中與其他元素產生一定的間距。

案例四：使用絕對定位

通過使用絕對定位（position: absolute），可以將<div>元素從正常的文檔流中脫離，并以相對于其最近的已定位祖先元素為參考，指定其精確的位置。

.container {
position: relative;
}
.box {
position: absolute;
top: 10px;
left: 10px;
}

上述代碼中，我們將<div>元素的容器元素設置為相對定位，然后為<div>元素指定了絕對定位，并將其向下和向右移動了10像素。這樣，<div>元素將在布局中與其他元素產生一定的間距，并且完全脫離文檔流，不受其它元素的影響。

<div>元素在HTML中是常用的塊級元素，通常情況下會緊貼著其所在容器的邊緣。然而，通過使用內邊距、外邊距、相對定位和絕對定位等方法，我們可以使<div>元素不貼邊，并在布局中產生一定的留白或間距效果。通過靈活運用這些技巧，我們可以更好地控制頁面布局，提升用戶的交互體驗。