margin 與 padding 差別在哪裡？（2）

更新日期： 2021 年 6 月 30 日

乳題，當我在測試兩者之間的差異時，我發現有一個狀況 margin 跟 padding 完全沒有差別，我用實際例子證明。

我先設定兩個相同的 html 內容。

<div class="container-1">
  <h1>這是標題</h1>
  <p>這是段落段落</p>
  <a href="#">這是連結</a>
  <ul>
    <li>這是項目</li>
    <li>這是項目</li>
    <li>這是項目</li>
  </ul>
</div>

<div class="container-2">
  <h1>這是標題</h1>
  <p>這是段落段落</p>
  <a href="#">這是連結</a>
  <ul>
    <li>這是項目</li>
    <li>這是項目</li>
    <li>這是項目</li>
  </ul>
</div>

針對 container-1 ，我分別在各個元素獨自寫上 margin-left 30 px

.container-1{
  background: #3f4162;
  color: #aa8c17;
  width: 300px;
  font-size: 36px;
  margin-bottom: 10px;
}

.container-1 h1{
  margin-left: 30px;
}

.container-1 p{
  margin-left: 30px;
}

.container-1 a{
  margin-left: 30px;
}

.container-1 li{
  margin-left: 30px;
}

另一方面，針對 container-2 ，我分別在各個元素獨自寫上 padding-left 30 px

.container-2{
  background: #3f4162;
  color: #aa8c17;
  width: 300px;
  font-size: 36px;
  margin-bottom: 10px;
}

.container-2 h1{
  padding-left: 30px;
}

.container-2 p{
  padding-left: 30px;
}

.container-2 a{
  padding-left: 30px;
}

.container-2 li{
  padding-left: 30px;
}

結果顯示如下，完全沒有差別。

經過我推測，我察覺表面上看起來一樣，但真正的問題可能是在邊框大小的改變，因此我分別在 p 插入一段程式碼，同時刪除原本 h1 的 margin 與 padding 設定作為對比。

這是 container-1 的部分程式碼

.container-1 h1{
  border: 2px solid ;
}

.container-1 p{
  border: 2px solid ;
  margin-left: 30px;
}

這是 container-2 的部分程式碼

.container-2 h1{
  border: 2px solid ;
}

.container-2 p{
  border: 2px solid ;
  padding-left: 30px;
}

最後，顯示結果如下。

可以得知，在外框的輔助顯示下，margin 造成的改變讓原本的元素發生了「位移」，原先容器的大小也因此縮小了；但 padding 則是在容器位置不變的情況下，內部文字受到推擠往內移動了一些。

因此我們可以得知，「外推」與「內推」的界定分隔線，是以 border 為主。border 往外推就代表是 margin，border 往內推就代表是 padding。

以上就是我的理解，謝謝大家。