margin 與 padding 差別在哪裡？

更新日期： 2024 年 9 月 14 日

乳題，我剛看到這兩個語法時，完全無法理解這兩者之間的差異，只知道差別好像是「外推」與「內推」。

為了驗證兩者之間的差異，我先設定創立三個相同的 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;
}

最後的呈現，會顯示如下圖所示

因此可以理解，「外推」的意思是元素推離原本的外置，是「位置的移動」；「內推」的意思是改變元素本身大小，是「內部面積大小的改變」。

以上就是我簡單的理解，我們下次見。