學會了"盒子模型",想當前端工程師還怕什麼?(下)

學會了”盒子模型”,想當前端工程師還怕什麼?(下)

學會了"盒子模型",想當前端工程師還怕什麼?(下)
學會了”盒子模型”,想當前端工程師還怕什麼?(下)

 

完成前端工程師的盒子任務只差一步,再一步你就學到所有盒子模型的精隨囉!

複習:在盒子模式中,內容 (content) 是最內層的部分,接下來依序為留白 (padding)、邊框 (border)、以及邊界 (margin)。邊界是用來設定各個元素之間的距離。

相關的 CSS 指令由外至內依序為 邊界 (margin)、邊框 (border)、以及 留白 (padding)。而這篇主要介紹邊框及留白:

目錄
1. 邊界 (margin)
2. 邊框 (border)
3. 留白 (padding)

邊框

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

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

邊框設定範例如下:

border: 1px solid #000000;

See the Pen margin:上下左右; (一個值) by Tedutw (@Tedutw) on CodePen.

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

 

 

留白

padding(留白)外側緊鄰邊框 (border)、內側緊鄰內容 (content)。如果沒有設定 padding,內容的部分就會黏著邊框。padding 就會吃到背景色。

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

See the Pen
margin:上 左右 下; (三個值)
by Tedutw (@Tedutw)
on CodePen.

 

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

 

See the Pen margin:上 左右 下; (三個值)-加上邊框 by Tedutw (@Tedutw) on CodePen.

 

Padding 的上下左右調整,語法跟 Margin 一樣,已身為前端工程師的同學特別強調,順序很重要。列舉如下:

 

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

 

 

 

延伸閱讀:

學會了”盒子模型”,想當前端工程師還怕什麼?(上)

有了網頁顏色代碼整理,網頁設計對於前端工程師來說再也不難!

讓你對前端工程師具備的技巧游刃有餘!(上)必瞭CSS特性

正在學網路行銷課程的你,是否也被虛擬人生APP吸引了呢?

上了Python課程,再思考如何能向十大世界人工智慧研發先驅看齊

Java課程助你擠進IT專業職場大門

人人都能是工程師!台灣 IT 培訓中心推「找到工作再付學費」專案,要試試嗎?

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料