前端工程師口中的"盒子模型",今天用兩篇讓你立馬了解!(下)

前端工程師課程的盒子模型,終於分享第二篇了!之後靠著這兩篇我什麼都不怕!

複習：在盒子模式中，內容 (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 的例子，可以看見內容的字緊鄰黑色的邊框

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

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

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

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

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

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

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

👄延伸閱讀：

前端工程師口中的"盒子模型",今天用兩篇讓你立馬了解!(上)

HTML繼承關係是什麼?想成為前端工程師快來看

前端工程師到底在幹嘛?今天這四種嵌入方法讓你更了解! 

從UI課程開始你新的一年!增加新技能,機會找上門! 

零售業救星!有了人工智慧,員工都笑呵呵,業績強滾滾! 

人工智慧不會讓你失業,還讓你口袋滿滿哦!

NOWnews 今日新聞