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


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


---

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

- 針對 .box p :

margin-left: 30px;

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



---

### padding :

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

- padding，向內推擠的效果:

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

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



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