margin 與 padding 差別在哪裡?


Posted by strangedog on 2021-04-06

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

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

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

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

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










Related Posts

使用 AntV 製作資料圖表-台灣老年人口與長照機構供需比

使用 AntV 製作資料圖表-台灣老年人口與長照機構供需比

新手學 Command line 與 Git 的基本指令

新手學 Command line 與 Git 的基本指令

Day06 SharePrefernce+滑動刪除+Update功能(上)

Day06 SharePrefernce+滑動刪除+Update功能(上)


Comments