在CSS3中，設置外邊距可以使用margin屬性。margin屬性可以應用于任何元素，以控制該元素與其周圍元素之間的空間距離，以下是設置外邊距的一些常見用法：

1、設置單個方向的外邊距：

margin-top：設置元素的上外邊距。

margin-right：設置元素的右外邊距。

margin-bottom：設置元素的下外邊距。

margin-left：設置元素的左外邊距。

2、設置所有方向的外邊距：

margin：可以同時設置四個方向的外邊距，如margin: 10px;。

margin: auto;：自動計算左右或上下的外邊距，常用于居中顯示元素。

3、使用百分比設置外邊距：

- 百分比的外邊距是基于包含塊的寬度計算的，如margin: 10%;。

4、使用負值設置外邊距：

- 可以通過設置負的外邊距來使元素更靠近其周圍的元素，如margin: -10px;。

5、使用border-box設置外邊距：

- 當使用box-sizing: border-box;時，外邊距是包含在元素的寬度和高度內的，這意味著增加的外邊距會減少元素的內部空間。

示例

以下是一個簡單的示例，展示了如何使用CSS3設置元素的外邊距：

<div style="margin: 20px;">我是一個div元素，有20像素的外邊距</div>

居中顯示元素

要將元素居中顯示，可以使用margin: auto;來實現(xiàn)：

<div style="width: 50%; margin: auto; background-color: #f0f0f0;">我是一個居中的div元素</div>

使用百分比設置外邊距

使用百分比來設置外邊距可以使得元素在不同大小的屏幕上都能保持相對的位置關系：

<div style="width: 50%; margin: 10%;">我是一個使用百分比外邊的div元素</div>

使用負值設置外邊距

使用負值來設置外邊距可以使元素更靠近其周圍的元素：

<div style="width: 50%; margin: -10px;">我是一個使用負值外邊的div元素</div>

使用border-box設置外邊距

當使用box-sizing: border-box;時，外邊距是包含在元素的寬度和高度內的：

<div style="width: 50%; box-sizing: border-box; margin: 20px;">我是一個使用border-box外邊的div元素</div>

通過掌握這些CSS3中的外邊距設置技巧，你可以更好地控制HTML元素的布局和樣式。