margin 與 padding 差別在哪裡?(2)


Posted by strangedog on 2021-04-07

乳題,當我在測試兩者之間的差異時,我發現有一個狀況 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。

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










Related Posts

Day01-sigfox開啟全球一個網的物聯網世界

Day01-sigfox開啟全球一個網的物聯網世界

使用 Python 資料分析和視覺化上市櫃公司薪資公開資料

使用 Python 資料分析和視覺化上市櫃公司薪資公開資料

每日心得筆記 2020-06-17(三)

每日心得筆記 2020-06-17(三)


Comments