border(邊框), margin(邊界), padding(邊距) | HTML padding
http://pinkyvivi.pixnet.net/blog/post/1131260-css%E2%88%A5%E6%8E%92%E7%89%88%E8%A7%80%E5%BF%B5-boxmodel%3Emargin%E3%80%81paddingpadding:[上面留白值][右邊留白值][下面留白值][左邊留白值]CSS排版有一個很重要的觀念:BoxModel。它描述了元素之間的彼鄰關係,同時也左右了我們是否能夠成功透過CSS,完成整個頁面的呈現。BoxModel的意思,直譯英翻中可以解釋成,方塊模組,也就是說,每一個元素我們都可視它為一個Box(方塊)。一個Box由以下屬性組成:margin、padding、border、content。而一個Box的實際寬度(高度)是由paddi...
http://pinkyvivi.pixnet.net/blog/post/1131260-css%E2%88%A5%E6%8E%92%E7%89%88%E8%A7%80%E5%BF%B5-boxmodel%3Emargin%E3%80%81paddingpadding: [上面留白值] [右邊留白值] [下面留白值] [左邊留白值]CSS 排版有一個很重要的觀念: Box Model 。它描述了元素之間的彼鄰關係,同時也左右了我們是否能夠成功透過 CSS ,完成整個頁面的呈現。
Box Model 的意思,直譯英翻中可以解釋成,方塊模組,也就是說,每一個元素我們都可視它為一個 Box(方塊)。一個 Box 由以下屬性組成:margin 、 padding 、 border 、 content 。而一個 Box 的實際寬度 (高度) 是由 padding + border + width (height) 所組成,如下圖:
--------------------------------------------------------------------------------
border
border 是一個「加上去」的屬性,換句話說,一般都是用來區隔元素與元素用的。 border 的外圍即為元素的最外圍(margin),因此計算元素實際的寬高時,就一定要將 border 納入。換句話說, border會佔有空間,所以在計算精細的版面時,一定要將 border 的影響考慮進去。
如下圖,黑色虛線部份即為 border :
還有一點要特別注意,如果我們在元素上設定背景色時, IE 是作用在 padding + content ,而 Firefox 則是作用在 border + padding + content 上。
--------------------------------------------------------------------------------
padding
padding 會在元素內容的周圍加上我們所指定大小的空間;而如果我們沒有指定元素的寬高時,那麼該元素的內容就...