> For the complete documentation index, see [llms.txt](https://docs.webmix.cc/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webmix.cc/html-and-css/3.-css/3.6-ou-kuai-mo-xing-box-model.md).

# 3.8 排版 - 區塊模型(Box Model)

## **認識 Box Model**

**margin**：border 往外的距離。

**padding**：內容與 border 的距離。

**border**：該元素的邊框。

![](/files/-Lm_J9lQ-R41V_WzdbPc)

## margin 和 padding 縮寫

分別都有:

* `margin-top`、`margin-right`、`margin-bottom`、`margin-left`
* `padding-top`、`padding-right`、`padding-bottom`、`padding-left`

```css
margin: 10px;                /* 上、右、下、左，皆 10px */
margin: 10px 20px;           /* 上、下皆 10px；左右皆 20px */
margin: 10px 20px 30px;      /* 上 10px；左右皆 20px；下 30px */
margin: 10px 20px 30px 40px; /* 按照上、右、下、左的順序，依序為 10px、20px、30px、40px */
```

padding 縮寫形式相同。

## 區塊大小(box-sizing)

常用的有兩個值：**content-box** 和 **border-box**：定義的是寬高從何處算起。

* `content-box`：(預設值)，設定 width 或 height 時，寬度、高度指的是內容寬。
* `border-box`：設定 width 或 height 時，寬度、高度指的是從邊框也算進去，包含 padding。

例：

{% embed url="<https://codepen.io/carlos411/pen/WNzVExx>" %}

## 認識寬高長度單位

### 常用屬性

* width
* height
* min-width：限定該元素的最小寬度是多少。
* min-height：限定該元素的最小高度是多少。
* max-width：限定該元素的最大寬度是多少。
* max-height：限定該元素的最大高度是多少。

### 常用單位

* px：pixel。像素。例 50px。
* %：百分比。例：50%。
* vw：Viewport Width。視埠寬度。例：50vw。
* vh：Viewport Height。視埠高度。例：50vh。