---
tags: css
---

# margin、padding、box Model

> 以一個正常box 100*100 px 的狀態來做範例


### margin特性 - 會產生外邊界留白

> 如果我們 推擠了 margin: 30px;


### padding 產生留白的距離


* 如果在排版時需要將字與邊界推擠留白的話就可以使用 padding

.box{
width: 100px;
background-color: blue;
padding: 10px;
}

 <div class="box">
        <h2>123</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente hic autem et culpa consectetur! Reiciendis
            natus quibusdam corporis expedita, soluta, perferendis fugiat dicta pariatur fuga atque quam, quo sapiente
            sed!</p>
        <a href="http://">aa</a>
        <a href="http://">bb</a>
    </div>

> 內距都會有與邊界留白的距離

### box Model

* 在使用padding、border時都會讓div容器裡面加上長寬
> 例如 以下

.box{
width: 100px;
height: 100px;
background-color: blue;
/* 新增了  border padding */
border: 10px solid #fff;
padding: 10px;
}

> border 一共加(上下、左右) 20px、padding 也加 (上下、左右)20px，所以等於40px，加了原有的100px 等於 140px


* 在使用margin時，會影響到會是 html最外層的空間，而不會影響div本身容器的空間

> 例如我們增加了 margin-bottom: 30px ，這時總空間html就會原先的容器 140px + 30px = 170px