勵志

勵志人生知識庫

css margin用法

CSS的`margin`屬性用於設定元素的外邊距,它是一個簡寫屬性,可以通過它來設定一個元素的上、右、下、左邊距。以下是`margin`屬性的使用方法:

單獨設定邊距:可以使用`margin-top`、`margin-right`、`margin-bottom`和`margin-left`來分別設定元素的上、右、下、左邊距。

簡寫形式:`margin`屬性也可以接受1到4個值,以空間分隔,來設定邊距:

一個值:例如`margin: 10px;`,表示所有四個方向的外邊距都是10px。

兩個值:例如`margin: 10px 20px;`,第一個值設定上下邊距為10px,第二個值設定左右邊距為20px。

三個值:例如`margin: 10px 20px 30px;`,順序為上、右、下,分別設定為10px、20px、30px。

四個值:例如`margin: 10px 20px 30px 40px;`,順序為上、右、下、左,分別設定為10px、20px、30px、40px。

邊距的單位:邊距的值可以是像素(px)、百分比(%)、em等單位。

邊距的關鍵字:`margin`屬性還接受`auto`和`inherit`兩個關鍵字。`auto`用於讓瀏覽器自動計算外邊距的大小,通常用於設定塊級元素水平居中或平均分配空間;`inherit`用於繼承父元素的外邊距。

例如,以下CSS規則設定了元素的外邊距:

```css

div {

margin: 20px; /* 所有方向的外邊距都是20px */

margin: 20px 40px; /* 上邊距20px, 右邊距40px, 下邊距20px, 左邊距40px */

margin: 20px 40px 60px; /* 上邊距20px, 右邊距40px, 下邊距60px, 左邊距40px */

}

```

以上就是CSS中`margin`屬性的基本用法。