---
# System prepended metadata

title: padding 產生留白距離
tags: [HTML、CSS]

---

# padding 產生留白距離

### padding 與 margin 的差別是什麼？

- 事前建構：

```
// HTML:

    <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>
    
// CSS:

.box {
    border: 2px solid blue;
    display: inline-block;
}

.box p {
    margin-bottom: 10px;
}    
```
![](https://i.imgur.com/dp7x4LA.png)

**這是尚未有產生任何推擠前的樣子**

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

---



1. margin - 物件本身向外推擠:

- 針對 .box p :

```
margin-left: 30px;
```

- 滑動物件本身可以看到左邊的橘色區塊，那就是 margin 透過元素本身向左推擠的寬度：

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

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

---

### padding :

```
.box {
    padding: 30px;
    border: 2px solid blue;
    display: inline-block;
}
```


- padding，向內推擠的效果:

- 由圖片顯示，我們可以發現到:

  綠色的區域，由 .box 向內做了推擠

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

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


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

