前端工程師夏令營CSS教學(二)-盒子邊框與留白

在前端工程師夏令營中,對於盒子模式還有更深入介紹,本篇是關於邊框與留白部分!

盒子模式 (box model) 是在 CSS 中一個很重要的觀念。它是用來描述一個元素是如何組成的。以下是盒子模式的式樣：

在此篇要跟大家分享是關於box model的邊框及留白部分!

邊框

Border 是邊框，介於外側的邊界 (margin) 與內側的留白 (padding) 之間。不須特別設定，CSS 碼如下：

border: 邊界值 實線或是虛線 顏色;

邊框設定範例如下：

border: 1px solid #000000;

根據以上範例，我們藉由CSS碼得到一個外層包了一層黑色 (色碼為 #000000) 實線 (solid)、寬度1px的框。 border的數值只需要用空格分開即可，屬性不需要一個一個下，如:border-width、border-style、border-color 等等。

留白

根據前端工程師建議，padding(留白)外側緊鄰邊框 (border)、內側緊鄰內容 (content)。假設沒有設定 padding，內容的部分就會黏著邊框。padding 就會吃到背景色。

以下是沒有設定 padding 的例子，可以看見內容的字緊鄰黑色的邊框

以下是有設定 padding 的例子, 可以看見內容的字與邊框有一段距離.這一段距離就是所謂的「padding」。padding會吃到背景色。

Padding 的上下左右調整，語法跟 Margin 一樣，順序很重要。列舉如下：

在前端工程師眼中，Padding 的上下左右調整，語法跟 Margin 一樣，順序很重要。列舉如下：

padding:[上面留白值] [右邊留白值] [下面留白值] [左邊留白值]
padding:[上面留白值] [左邊與右邊留白值] [下面留白值]
padding:[上面與下面留白值] [左邊與右邊留白值] 
padding:[上面與下面與左邊與右邊留白值] 

推薦文章:
前端工程師夏令營CSS教學(一)-盒子屬性與邊界

五分鐘搞好CSS跟HTML的關係,簡單到前端工程師做夢也會笑!

想成為專業的前端工程師?千萬別錯過這篇CSS教學!

Java課程、UI課程、程式課程、網路行銷課程推薦

什麼? AI人工智慧也會養蝦? 電腦精準分析控制,結果讓你一想不到!!

網路行銷課程又多了新角色!這個最近爆紅的APP你還沒下載嗎?

Python課程帶你看電影!! AI主題電影讓你一次看好看滿!!