CSS | 網頁排版-white space margin&padding

— 自學 WEB DESIGN 日誌 Day4 —

留白在網頁的版面配置中，一直是一個非常重要的元素，讓使用者能夠有「喘息空間」，我們來比較一下目前都非常活絡的兩家電商網站 pinkoi 以及 pchome 就知道了：

1. pinkoi

2. PChome

PChome 看起來就很經濟實惠，但哪一個網頁看起來比較舒服、更能夠提升品牌的質感，這問題已經不證自明。

現在就來解釋一下，CSS 中常見的兩個屬性：

1. margin ：物件外圍與其他物件的距離
2. padding ：物件與物件內容之間的距離

如果以教室做為物件來比擬的話，每間教室的間離就是 margin，教室的外牆與課桌椅的距離就是 padding。

我們用 codepen 來具體化剛剛的概念，最原初的狀態是：

margin:0px;
padding:0px;

結果如下圖，不論是教室之間的距離或是教室內的空間，距離都非常狹窄。

margin

如果想要增加教室之間的距離呢？沒錯就是調整margin就對了，將 margin 從 0px 增加為 50px：

margin:50px;
padding:0px;

可以發現教室間的距離增加，如果人有內建的 margin，就可以在這種非常時期保持社交距離喔。

padding

但如果是想要增加教室內的空間(\TIIDA/)，則是修改 padding ，一樣從 0px 增加為 50px:

margin:0px;
padding:50px;

另外，還有需要釐清的一點是「padding 的效果不會疊加」，不像是計算機10+10=20，padding 的指令都是單獨運作，更有一種覆蓋的意味，就來舉個例子看一下是怎麼一回事：

padding:10px;
padding-left:10px;
＊medium 插入程式碼 ：cmd+opt+6

整體 padding 是 10px，但是加入 padding-left:10px; 為什麼不會往左移動 10px？因為效果不會疊加，如果要讓左側 padding 是 20px，則是下padding-left:20px; （如下），所以 padding 指令是獨立且並列，也可以說 padding-left 是 padding 的特例，假如有特別指定 padding-left ，則左側的留白部分會直接聽從 padding-left ，而覆蓋整體的 padding 指令。

padding:10px;
padding-left:20px;

有感受到其中的差異嗎？