2019年12月23日 星期一

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 排版很重要的技術之一。所以我打算多花一點時間解釋它。
我們可以分以下兩種狀況解釋:「元素與相鄰元素的距離」及「元素與父元素間的距離」。

沒有留言:

張貼留言