# 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>

---

- 會發現，三個段落的字都黏在一起:

- 我目標將他產生一些推擠的感覺，不要這麼擠：
要使用「後代選擇器」:

### margin - 有四個方向，如果單純只是要上下左右都吃到間隔，寫法就是：

* {
    margin: 10px;
    // margin 值: top / right / bottom / letf 不寫方向則是四邊都會推
} 

### 這次則是要向下：

.box p {
    // 單位向下間隔 10px
    margin-bottom: 10px;
}


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

- 寫死寬度，文字內容會根據寬度自動向下推擠
2來，這樣會增加其**高度**

.box {
    border: 2px solid blue;
    width: 300px;
}


### 建議不寫死高度:

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

可能會出現以下現象:

.box {
    border: 2px solid blue;
    width: 300px;
    /* 刻意寫死高度： */
    height: 50px;
}


- 原因是為什麼?

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

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

---

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

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

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

主要是因為自動適應 .box

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