---
# System prepended metadata

title: margin 元素產生邊界
tags: [HTML、CSS]

---

# margin 元素產生邊界

- 我們有一個 `div` .box 裡面包了 3個 `p`段落

```
<div class="box">
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id, nam?</p>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa.</p>
</div>
```


---

- 會發現，三個段落的字都黏在一起:
![](https://i.imgur.com/pfg0TVp.png)

- 我目標將他產生一些推擠的感覺，不要這麼擠：
  要使用「後代選擇器」:
  
  
### margin - 有四個方向，如果單純只是要上下左右都吃到間隔，寫法就是：

```
* {
    margin: 10px;
    // margin 值: top / right / bottom / letf 不寫方向則是四邊都會推
} 
```
 
### 這次則是要向下： 
 
```
.box p {
    // 單位向下間隔 10px
    margin-bottom: 10px;
}
```  

![](https://i.imgur.com/J8WRWeK.png)


### 替 .box 編輯一個外框線、寫入寬度：

- 寫死寬度，文字內容會根據寬度自動向下推擠
  2來，這樣會增加其**高度**
 
```
.box {
    border: 2px solid blue;
    width: 300px;
}
```

![](https://i.imgur.com/RosleKa.png)


### 建議不寫死高度:

- div 不建議寫死高度，例如下列文字段落，當你寫死高度但內容不夠放時

  可能會出現以下現象:
  
  
```
.box {
    border: 2px solid blue;
    width: 300px;
    /* 刻意寫死高度： */
    height: 50px;
}
```

![](https://i.imgur.com/RXkpGxx.png)

- 原因是為什麼? 

1. 若使用右鍵檢查會發現三個 `p` 總高度: 80px

2. 但是寫死的高度僅有 50px，這也就是為何.box 的框框無法完整包住3個文字段落的原因

---


### 區塊元素延伸特性:

1. 會自動適應父階層的寬度，且盡可能的佔滿

ex: p 段落並未寫出寬度 - width，但卻會自動延伸框線

    主要是因為自動適應 .box


###### tags: `HTML、CSS`