CSS - 外邊距

簡寫表示可以透過一次性傳遞外邊距值來縮短程式碼。

所有四個值可以一次性傳遞，也可以組合一個、兩個或三個值一起傳遞。

一個、兩個、三個和四個值宣告的外邊距簡寫符號規則如下：

值的數量	順序
一個	相同的邊距應用於所有四個邊
兩個	第一個邊距應用於頂部和底部，第二個應用於左側和右側
三個	第一個邊距應用於頂部，第二個應用於左側和右側，第三個應用於底部
四個	邊距依次應用於頂部、右側、底部和左側

CSS 外邊距 - 基本示例

以下示例演示了簡寫符號的使用：

<html>
<head>
</head>
<body>
    <h3>margin-shorthand properties</h3>
    <div>
        <p style="margin: 50px; border: 1px solid #0b0b0b;">This element has same margin on all the sides - 50px.</p>
        <p style="margin: 50px 10%; border: 1px solid #0b0b0b;">This element has top and bottom margins as 50px and right and left margins as 10%.</p>
        <p style="margin: 25px 40px 50px; border: 1px solid #0b0b0b;">This element has a top margin as 25px, left and right as 40px and bottom margin as 50px</p>
        <p style="margin: 10px 20px 30px 40px; border: 1px solid #0b0b0b;">This element has a top margin as 10px, left as 20px, right as 30px and bottom margin as 40px</p>
    </div>
</body>
</html>

列印頁面