【網頁設計入門】04 .Padding和Margin | 內間距與外間距

 

●縮寫

在寫padding和margin的時候，由於屬性裡有top/right/left/bottom之分，如果每個區塊上下左右都要一一寫出來未免太缺乏效率，這時候我們可以使用縮寫：

padding: 10px; (四邊皆漲10px)
padding: 10px 20px; ( 上下漲10px 左右漲20px)
padding: 10px 20px 10px; (上、左右、下)
padding: 10px 20px 30px 40px;(上、右、下、左)
即可一行將四邊設定完成！

●Padding特性

Padding(內間距)會向內增加內容的寬高，長寬100px的方塊，加入padding: 10px，物件的長寬會變為140px，若不想增加物件的總寬高，可以使用 box-sizing:border-box; 將物件的總寬約束在原本設定的width寬度上，這會使padding的內距向內擠壓，若內容為行內元素，就會提前折行，區塊元素則是根據overflow的特性決定在width邊界溢出或隱藏。

參見：
Box-sizing - 金魚都能懂的CSS必學屬性　（＜＜＜推薦閱讀）
border(邊框), margin(邊界), padding(邊距)

●Margin特性

Margin控制物件與其他物件的間距(外間距)，可以使用負值，但在未設定border的父元素內的block(區塊元素)使用margin時，第一個margin-top會被父元素吃掉。此時需將父元素設定border，或在父層上下加padding:1px即可。(參見：CSS 失控的 Margin top）

延伸閱讀：
我知道你不知道的负Margin
【網頁入門】05.區塊元素與行內元素、常見單位應用