乳題,我剛看到這兩個語法時,完全無法理解這兩者之間的差異,只知道差別好像是「外推」與「內推」。
為了驗證兩者之間的差異,我先設定創立三個相同的 html 內容,以下挑選其中一個
<div class="margin-1">
<h2>
標題
</h2>
<ul>
<li>項目</li>
<li>項目</li>
<li>項目</li>
</ul>
<a href="#" >這是連結</a>
<p>
段落段落
</p>
<p>
段落段落
</p>
<p>
段落段落
</p>
</div>
之後,我再分別設定三款不同的 CSS 樣式。
第一塊元素,我直接在父階 div 插寫上 margin 30px
.margin-1{
margin-left: 30px;
background: #166b78;
color: #131313;
width: 300px;
font-size: 36px;
margin-bottom: 50px;
}
第二塊元素,我分別在各段語法依序寫上 margin 30px
.margin-2{
background: #166b78;
color: #131313;
width: 300px;
font-size: 36px;
margin-bottom: 50px;
}
.margin-2 h2{
margin-left: 30px;
}
.margin-2 li{
margin-left: 30px;
}
.margin-2 a{
margin-left: 30px;
}
.margin-2 p{
margin-left: 30px;
}
第三區塊,我直接在父階 div 寫上 padding-left 30px
.padding{
padding-left: 30px;
background: #2334cd;
color: #e7c83a;
width: 300px;
font-size: 36px;
}
最後的呈現,會顯示如下圖所示
因此可以理解,「外推」的意思是元素推離原本的外置,是「位置的移動」;「內推」的意思是改變元素本身大小,是「內部面積大小的改變」。
以上就是我簡單的理解,我們下次見。