Java課程是為了今日．Python課程是為了將來

延續上一篇前端工程師必學的CSS盒子模式!這篇的小貼士要來說說邊框和留白!

讓我們來複習一下，上一篇小貼士中說過了- 在盒子模式中，內容 (content) 是最內層的部分，接下來依序為留白 (padding)、邊框 (border)、以及邊界 (margin)。邊界是用來設定各個元素之間的距離。

相關的 CSS 指令由外至內依序為 邊界 (margin)、邊框 (border)、以及 留白 (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:[上面與下面與左邊與右邊留白值] 

相關閱讀:

前端工程師小貼士-CSS盒子模式(上)屬性和邊界

前端工程師必學課程:CSS的常見邊框屬性解釋

前端工程師的必備知識:CSS的繼承關係

企業們都已開始花大把鈔票在引進AI人工智慧了,你的機會在哪裡?

部落客必學的HTML5教學法寶二-兼顧美觀與優化的表格標籤

前端工程師不可不知!! HTML5教學1:要怎麼在檔案中導入CSS?

想進入全球十大AI人工智慧公司!Python課程是基礎入門