css排版觀念padding＆margin

CSS 排版有一個很重要的觀念： Box Model 。它描述了元素之間的彼鄰關係，同時也左右了我們是否能夠成功透過 CSS ，完成整個頁面的呈現。

Box Model 的意思，直譯英翻中可以解釋成，方塊模組，也就是說，每一個元素我們都可視它為一個 Box（方塊）。一個 Box 由以下屬性組成：margin 、 padding 、 border 、 content 。而一個 Box 的實際寬度 (高度) 是由 padding + border + width (height) 所組成，如下圖：

 

所以一般我們指定的 width（寬度） 和 height（高度）是 content 的寬和高，而沒有包含 border 和 padding 。換句話說，一個元素真正佔用的視覺空間，應該是 content + padding + border ，這是標準的 CSS 規範。

margin可以解釋成，以border（邊欄）為主，邊欄以外的空白處。
padding則是以border為主，邊欄以內的空白處。

padding

padding 會在元素內容的周圍加上我們所指定大小的空間；而如果我們沒有指定元素的寬高時，那麼該元素的內容就會受到 padding 所擠壓。如下圖：

 

margin

margin 的意義就是該元素與其他元素間的邊界距離，它的應用大概也算是 CSS 排版很重要的技術之一。所以我打算多花一點時間解釋它。

我們可以分以下兩種狀況解釋：「元素與相鄰元素的距離」及「元素與父元素間的距離」。