乳題,當我在測試兩者之間的差異時,我發現有一個狀況 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。
以上就是我的理解,謝謝大家。