Java瑪奇朵-非本科系的IT吃喝電玩日誌

前端工程師專欄今天要來教你如何讓背景變漂亮!! 想知道的話快往下看吧!!

前端工程師必備技能!! 背景固定模式設定你會了嗎? 這一篇一次介紹給你三種模式設定!! 快來看看是哪三種吧!!
CSS background-attachment 是

前端工程師用來決定背景圖片是否要跟著滑鼠滾動而上下移動的，有三種不同的呈現方案，第一種為當滑鼠上下滾動時，背景圖片與網頁主體跟著上下滾動；第二種為當滑鼠上下滾動時，背景圖片相對位置固定不動，呈現效果就像是網頁主體與背景是分開的，；第三種為當滑鼠上下滾動時，背景圖片絕對位置固定不動，似乎網頁主體是浮在背景圖之上的感覺。CSS background-repeat 一般來說與 背景圖樣設定 (background-image) 一起搭配設計。
 
CSS background-attachment 基本語法如下：
background-attachment: 顯示參數;
有三種可以使用的顯示參數可供前端工程師們決定背景圖與網頁主體該以何種方式來搭配顯示，分別為 scroll（預設值，背景圖案的「相對位置」不會隨著滾動機制而移動，而網頁主體則會跟著滾動）、fixed（背景圖案的「絕對位置」不會隨著滾動機制而移動，而網頁主體則還是會跟著滾動，彷彿網頁主體是浮在整張背景圖之上的感覺。多用於網頁背景圖為滿版的場合時使用）、local（背景圖案與網頁主體都會跟著滾動機制而滾動。以下是針對這三種參數的範例：
 
CSS background-attachment 各種參數的範例
See the Pen background-attachment-example by Tedutw (@Tedutw) on CodePen.

現在新一代的網頁多採滿版設計，其中的「background-attachment: fixed;」參數，常被當代的前端工程師搭配「background-repeat: no-repeat;」參數使用，做出網頁主體都浮在高質感的背景圖的效果。

其他常用 CSS background 背景屬性說明連結
1. 背景顏色設定 (background-color)
2. 背景圖樣設定 (background-image)
3. 背景重複設定 (background-repeat)
4. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)

其他閱讀
前端工程師專欄:CSS套入HTML中的四種方法~
前端工程師專欄:要如何在HTML和CSS中宣告顏色代碼
前端工程師和後端工程師的差異,想學網頁的你也一定要知道!
你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?
最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?
你知道SEO優化最佳幫手的正確打開方式嗎? 看這篇就對了!!
美國NASDAQ上市公司、外商IT教育培訓企業
 
 

 
今天的前端工程師專欄要來跟大家分享CSS背景顏色設定~ 沒學過的快學起來!! 學過得當複習喔~
前端工程師使用背景顏色設定 (background-color)屬性，可以讓簡潔的純色背景襯托出網頁的主體、也可以決定網頁的風格。像是背景純黑的網頁與背景為粉紅色的網頁，風格就大不相同。其實 background-color 能夠使用的範圍除了網頁背景色外，也可以用來設計表格、DIV 區塊、span 等網頁元素的背景顏色。前端工程師可要好好利用喔~
 
CSS background-color 基本語法如下：
background-color: 顏色名稱或色碼 ;
background-color 可以使用的顏色值包含顏色的英文名稱、十六進位制色碼以及 RGB 色碼，挑選顏色請參考：網頁顏色代碼對照表。
 
CSS background-color 語法範例一、網頁背景
html{background-color: 顏色名稱或色碼 ;}
See the Pen background-color-bg-example by Tedutw (@Tedutw) on CodePen.

 
CSS background-color 語法範例二、DIV 區塊、H1-H6 標題等斷落的背景顏色
div(可替換成 h1、p 等網頁元素標籤){background-color: 顏色名稱或色碼 ;}
See the Pen background-color-div-example by Tedutw (@Tedutw) on CodePen.
同樣的技巧還可以用在其他的網頁元素，若想採用圖片當成背景，請參閱：2. 背景圖樣設定 (background-image)。

其他常用 CSS background 背景屬性說明連結
1. 背景顏色設定 (background-color)
2. 背景圖樣設定 (background-image)
3. 背景重複設定 (background-repeat)
4. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)

 
 
其他閱讀
 
前端工程師專欄:CSS套入HTML中的四種方法~
前端工程師專欄:要如何在HTML和CSS中宣告顏色代碼
前端工程師和後端工程師的差異,想學網頁的你也一定要知道!
你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?
最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?
你知道SEO優化最佳幫手的正確打開方式嗎? 看這篇就對了!!
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？
 
 
 
 
 
 

身為前端工程師一定要懂的CSS邊框屬性解釋, 今天通通幫你一次整理好!! 讓大家一目了然記得清楚~
在 CSS 中常見的邊框 (border) 屬性，分別介紹如下列目錄：


目錄 border-width: 邊線的寬度 border-style：邊框樣式 border-color：邊線的顏色 border-top/left/bottom/right: 上/左/下/右框線 border: 四邊框線

border-width: 邊線的寬度

在CSS中border-width 屬性是前端工程師用來設定邊框的寬度。可用的值為 thin (薄)、medium (中等)、thick (厚)，或者是一個數值單位。

/*薄線寬*/.thin { border-width: thin; border-style:solid;}
/*中等線寬*/.medium { border-width: medium; border-style:solid;}
/*厚線寬*/.thick { border-width: thick; border-style:solid;}
/*自行設定線寬*/.number { border-style:solid; }

See the Pen #demo-border-width by Tedutw (@Tedutw) on CodePen.

border-width：邊線的樣式

border-style 屬性指定邊框的樣式。以下列出常見的 border-style 屬性以及顯示的結果：

/*實線的CSS*/.solid { border-style: solid; }
/*點線的CSS*/.dotted { border-style: dotted; }
/*虛線的CSS*/.dashed { border-style: dashed; }
/*雙線的CSS*/.double { border-style: double; }
/*凸線的CSS*/.ridge { border-style: ridge; }
/*凹線的CSS*/.groove { border-style: groove; }
/*嵌入線的CSS*/.inset { border-style: inset; }
/*浮出線的CSS*/.outset { border-style: outset; }

See the Pen #demo-border style by Tedutw (@Tedutw) on CodePen.

border-color: 邊線的顏色

border-color 屬性是前端工程師用來設定邊框的顏色。範例如下：

/*紅色邊框*/.red{ border-color: red;border-style:solid; }
/*藍色邊框*/.blue{ border-color: blue;border-style:solid; }

See the Pen #demo-border-color by Tedutw (@Tedutw) on CodePen.

border-top/left/bottom/right: 上/左/下/右框線

我們可以將上下左右的方向和樣式、寬度、及顏色合起來而成為一個屬性。舉個例來說，border-top-style 屬性就是用來設定上邊框的樣式。 以下舉幾個例子：  

/*上邊框為實線，下邊框為點線*/
.topbottom{border-top-style:solid; border-bottom-style:dotted;}
/*上邊框為實線，且寬度中等*/
.top{border-top-style:solid; border-top-width:medium;}
/*左邊框為實線，下邊框為紅色虛線*/
.leftbottom{border-left-style:solid; 
border-bottom-style:dashed; border-bottom-color:#00FF00;}

See the Pen #demo-border-top/left/bottom/right by Tedutw (@Tedutw) on CodePen.

border: 四邊框線

如果四邊的邊框屬性都一樣，那我們就可以在同一行用一個 border 屬性一次宣告邊框樣式、邊框寬度、以及邊框顏色，而不必四個邊都個別再描述一次。

container{...
border: 1px solid #000000;
...}

See the Pen 用一行來宣佈所有邊框的屬性 by Tedutw (@Tedutw) on CodePen.

今天的前端工程師專欄要跟大家分享的是CSS盒子模型中的邊框留白部分~ 上一篇是邊界篇,也不要漏掉嘍!!
盒子模式 (box model) 是在CSS 中一個很重要的觀念。它是前端工程師用來描述一個元素是如何組成的。以下是盒子模式的式樣：

在盒子模式中，內容 (content) 是最內層的部分，接下來依序為留白 (padding)、邊框 (border)、以及邊界 (margin)。邊界是用來設定各個元素之間的距離。 相關的 CSS 指令由外至內依序為 邊界 (margin)、邊框 (border)、以及 留白 (padding)。分別介紹如下：


目錄 邊框 (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 的例子，可以看見內容的字緊鄰黑色的邊框  
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字體單位絕對篇的前端工程師們也不要錯過今天要談的下篇----相對篇喔~!!
在CSS ，字體單位可以分為兩大類：絕對 (absolute) 單位以及相對 (relative) 單位： 分別介紹如下：  

這一篇的工程師專欄要來和大家談談CSS中的盒子模型~ 不要錯過嘍!!
盒子模式 (box model) 是在

CSS 中一個非常重要的觀念。它是

前端工程師用來描述一個元素是怎麼樣組成的。以下圖例是盒子模式的式樣：
 

在盒子模式中，內容 (content) 是最內層的部分，接下來依序為留白 (padding)、邊框 (border)、以及邊界 (margin)。邊界是用來設定各個元素之間的距離。 相關的 CSS 指令由外至內依序為 邊界 (margin)、邊框 (border)、以及 留白 (padding)。分別介紹如下：
 


目錄 1. 邊界 (margin)


邊界
就像我們在盒子模式那一頁看到的圖例，邊界 (margin) 是在邊框之外，並且是用來設定各個元素之間的距離。一個盒子有四個邊，所以前端工程師們可以對這四個邊逐一設定：

margin-top (上邊界)

margin-right (右邊界)

margin-bottom (下邊界)

margin-left (左邊界)

有三種方式可以設定邊界，分別為長度、百分比、以及 'auto'。我們來看以下的例子 (請按下方例子左上方按鈕來切換 HTML 與 CSS 碼)：
See the Pen Margin by Tedutw (@Tedutw) on CodePen.
在這裡，上邊界為 50px，左邊界和右邊界為 10%，下邊界為 auto。   這樣寫會不會太麻煩一些? 會！其實定義邊界尺寸的這四行 CSS 碼，是可以濃縮成一行的！以下會介紹：  
Margin 邊界簡化 (一行文) 表示法
所有四個邊的邊界可以同時由一個 margin 屬性設定，只有一行文。它的語法如下：  
margin: [上面邊界值] [右邊邊界值] [下面邊界值] [左邊邊界值]
我們來看以下的例子 (請按下方例子左上方按鈕來切換 HTML 與 CSS 碼)：  
See the Pen Margin-2 by Tedutw (@Tedutw) on CodePen.
在這裡，邊界的表現跟最前面的例子一樣：上邊界為 50px，左邊界和右邊界為 10%，下邊界為 auto。   使用這種簡化的表示方法，重點在於數字的順序：第一個值是上邊界的值，第二個值是右邊界的值，第三個值是下邊界的值，而第四個值是左邊界的值。   這種簡化 CSS 的一行文標示方法，還有其他的方式，介紹如下：   margin：上 右 下 左; (四個值)   如上方例子所示   margin：上 左右 下; (三個值)  
margin: [上面邊界值] [右邊與左邊邊界值] [下面邊界值]
 
See the Pen margin：上 左右 下; (三個值) by Tedutw (@Tedutw) on CodePen.
  margin：上下 左右; (二個值)  
margin: [上面與下面邊界值] [右邊與左邊邊界值]
 
See the Pen margin：上下 左右; (二個值) by Tedutw (@Tedutw) on CodePen.
  margin：上下左右; (一個值)  
margin: [上下左右邊界值]
 
See the Pen margin：上下左右; (一個值) by Tedutw (@Tedutw) on CodePen.

身為前端工程師的你當別人講到絕對單位和相對單位時你卻是一頭霧水嗎? 如果答案是"是"的話你就一定要看這一篇!!
在 CSS ，字體單位可以分為兩大類：絕對 (absolute) 單位以及相對 (relative) 單位這是

前端工程師的基本常識~
分別介紹如下：  


目錄 1. 絕對單位 px (pixel 畫素) cm / pt / in / pc / mm large, medium, small 

 

CSS字體單位----絕對單位

   

px (pixel 畫素)

px 為 CSS 最常使用的單位。無論字體大小、區塊或其他元素的尺寸設定，都少不了它的蹤影。一般認為：px 會依據螢幕解析度而有所變化、平時被歸類為相對尺寸。但為何在 CSS 裡面就變成絕對尺寸呢？因為在 CSS 裡面，絕對尺寸的定義是「不會繼承上層父元素的設定」的尺寸。在 CSS 中，無論設定多少 px，它就會精確的呈現，他都不會繼承沿襲上一層的父元素的尺寸。如以下例子所示，就是若前端工程師使用 px 這個單位來設定大小，那麼不管頁面上其他的尺寸設定，都不會影響到他。 而 px 的定義，理論上就是：一個像素 px 意思就是螢幕上最小的一點：16 px 就是 16 點大小。 See the Pen #demo-px by Tedutw (@Tedutw) on CodePen.      

 

cm、pt、in、pc、mm

這些單位比較適用於印刷的排版軟體，在 CSS 比較少用。分別解釋如下：

1. in：英吋，在 96 dpi 的系統上 1 in = 96 px。


2. cm：公分，在 96 dpi 的系統上 1 cm = 37.795275593333 px。


3. mm：公釐，在 96 dpi 的系統上 1 mm = 3.7795275593333 px。


4. pt：印表機的每個「點」，定義為 1 pt ＝ 1/72 in，如果在 72 dpi 的系統上 1 px = 1 pt，但如果在 96 dpi 的系統上 1 px = 0.75 pt ( 72/96 = 0.75 )。


5. pc：picas，定義為 1 pc ＝ 12 pt。


6. in：英吋，在 96 dpi 的系統上 1 in = 96 px。

See the Pen #demo-cm、pt、in、pc、mm by Tedutw (@Tedutw) on CodePen.        

 

large, medium, small

  字體大小的屬性有七種如下：

1. xx-small：對應 h6 的標籤文字大小，為 medium 字體的 3/5 倍。


2. x-small：沒有對應的標籤文字大小，為 medium 字體的 3/4 倍。


3. small：對應 h5 的標籤文字大小，為 medium 字體的 8/9 倍。


4. medium：對應 h4 的標籤文字大小，，根據 W3C 的規範，以 medium 預設 16px 為基礎


5. large：對應 h3 的標籤文字大小，為 medium 字體的 6/5 倍。


6. x-large：對應 h2 的標籤文字大小，為 medium 字體的 3/2 倍。


7. xx-large：對應 h1 的標籤文字大小，為 medium 字體的 2/1 倍。

由上方看出，除了 x-small 沒有對應的標籤文字大小外，其餘六種分別對應 h6~h1 的標籤文字大小。而 medium 根據 W3C 的規範，大小為預設的 16px 為基礎 (除非另有自行設定預設字體大小，則不再此限)。所有的 large 與 small 屬性都是使用固定的倍數乘上 medium 的大小。 See the Pen #demo-large, medium, small by Tedutw (@Tedutw) on CodePen.  
 
其他閱讀

前端工程師還分不清CSS字體單位有哪些嗎? (相對篇)
HTML5教學----CSS基礎語法:字型與文字排列相關順序
前端工程師和後端工程師的差異,想學網頁的你也一定要知道!
你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?
最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?
你知道SEO優化最佳幫手的正確打開方式嗎? 看這篇就對了!!
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？

前端工程師專欄今天要和大家分享的是CSS邊框屬性解釋~ 學過的或還沒學過的都趕緊往下看一下吧!! 
在 CSS 中常見的邊框 (border) 屬性，分別介紹如下列目錄：


目錄 border-width: 邊線的寬度 border-style：邊框樣式 border-color：邊線的顏色 border-top/left/bottom/right: 上/左/下/右框線 border: 四邊框線

border-width: 邊線的寬度

在CSS中border-width 屬性是前端工程師用來設定邊框的寬度。可用的值為 thin (薄)、medium (中等)、thick (厚)，或者是一個數值單位。

/*薄線寬*/.thin { border-width: thin; border-style:solid;}
/*中等線寬*/.medium { border-width: medium; border-style:solid;}
/*厚線寬*/.thick { border-width: thick; border-style:solid;}
/*自行設定線寬*/.number { border-style:solid; }

See the Pen #demo-border-width by Tedutw (@Tedutw) on CodePen.

border-width：邊線的樣式

border-style 屬性指定邊框的樣式。以下列出常見的 border-style 屬性以及顯示的結果：

/*實線的CSS*/.solid { border-style: solid; }
/*點線的CSS*/.dotted { border-style: dotted; }
/*虛線的CSS*/.dashed { border-style: dashed; }
/*雙線的CSS*/.double { border-style: double; }
/*凸線的CSS*/.ridge { border-style: ridge; }
/*凹線的CSS*/.groove { border-style: groove; }
/*嵌入線的CSS*/.inset { border-style: inset; }
/*浮出線的CSS*/.outset { border-style: outset; }

See the Pen #demo-border style by Tedutw (@Tedutw) on CodePen.

border-color: 邊線的顏色

border-color 屬性是前端工程師用來設定邊框的顏色。範例如下：

/*紅色邊框*/.red{ border-color: red;border-style:solid; }
/*藍色邊框*/.blue{ border-color: blue;border-style:solid; }

See the Pen #demo-border-color by Tedutw (@Tedutw) on CodePen.

border-top/left/bottom/right: 上/左/下/右框線

我們可以將上下左右的方向和樣式、寬度、及顏色合起來而成為一個屬性。舉個例來說，border-top-style 屬性就是用來設定上邊框的樣式。 以下舉幾個例子：  

/*上邊框為實線，下邊框為點線*/
.topbottom{border-top-style:solid; border-bottom-style:dotted;}
/*上邊框為實線，且寬度中等*/
.top{border-top-style:solid; border-top-width:medium;}
/*左邊框為實線，下邊框為紅色虛線*/
.leftbottom{border-left-style:solid; 
border-bottom-style:dashed; border-bottom-color:#00FF00;}

See the Pen #demo-border-top/left/bottom/right by Tedutw (@Tedutw) on CodePen.

border: 四邊框線

如果四邊的邊框屬性都一樣，那我們就可以在同一行用一個 border 屬性一次宣告邊框樣式、邊框寬度、以及邊框顏色，而不必四個邊都個別再描述一次。

container{...
border: 1px solid #000000;
...}

See the Pen 用一行來宣佈所有邊框的屬性 by Tedutw (@Tedutw) on CodePen.

上一篇給前端工程師的CSS盒子模型邊界篇大家都看了嗎? 今天要來說的是邊康留白篇~ 快學起來吧!!
盒子模式 (box model) 是在CSS 中一個很重要的觀念。它是前端工程師用來描述一個元素是如何組成的。以下是盒子模式的式樣：

在盒子模式中，內容 (content) 是最內層的部分，接下來依序為留白 (padding)、邊框 (border)、以及邊界 (margin)。邊界是用來設定各個元素之間的距離。 相關的 CSS 指令由外至內依序為 邊界 (margin)、邊框 (border)、以及 留白 (padding)。分別介紹如下：


目錄 邊框 (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 的例子，可以看見內容的字緊鄰黑色的邊框  
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字體單位解釋(下)出來嘍~ 還沒看過上篇的繼的去看一下喔~
在CSS ，字體單位可以分為兩大類：絕對 (absolute) 單位以及相對 (relative) 單位： 分別介紹如下：  

正在準備成為前端工程師的你還不知道盒子模型是甚麼嗎? 今天讓你一次搞懂!! 快筆記下來吧~
盒子模式 (box model) 是在

CSS 中一個非常重要的觀念。它是

前端工程師用來描述一個元素是怎麼樣組成的。以下圖例是盒子模式的式樣：
 

在盒子模式中，內容 (content) 是最內層的部分，接下來依序為留白 (padding)、邊框 (border)、以及邊界 (margin)。邊界是用來設定各個元素之間的距離。 相關的 CSS 指令由外至內依序為 邊界 (margin)、邊框 (border)、以及 留白 (padding)。分別介紹如下：
 


目錄 1. 邊界 (margin)


邊界
就像我們在盒子模式那一頁看到的圖例，邊界 (margin) 是在邊框之外，並且是用來設定各個元素之間的距離。一個盒子有四個邊，所以前端工程師們可以對這四個邊逐一設定：

margin-top (上邊界)

margin-right (右邊界)

margin-bottom (下邊界)

margin-left (左邊界)

有三種方式可以設定邊界，分別為長度、百分比、以及 'auto'。我們來看以下的例子 (請按下方例子左上方按鈕來切換 HTML 與 CSS 碼)：
See the Pen Margin by Tedutw (@Tedutw) on CodePen.
在這裡，上邊界為 50px，左邊界和右邊界為 10%，下邊界為 auto。   這樣寫會不會太麻煩一些? 會！其實定義邊界尺寸的這四行 CSS 碼，是可以濃縮成一行的！以下會介紹：  
Margin 邊界簡化 (一行文) 表示法
所有四個邊的邊界可以同時由一個 margin 屬性設定，只有一行文。它的語法如下：  
margin: [上面邊界值] [右邊邊界值] [下面邊界值] [左邊邊界值]
我們來看以下的例子 (請按下方例子左上方按鈕來切換 HTML 與 CSS 碼)：  
See the Pen Margin-2 by Tedutw (@Tedutw) on CodePen.
在這裡，邊界的表現跟最前面的例子一樣：上邊界為 50px，左邊界和右邊界為 10%，下邊界為 auto。   使用這種簡化的表示方法，重點在於數字的順序：第一個值是上邊界的值，第二個值是右邊界的值，第三個值是下邊界的值，而第四個值是左邊界的值。   這種簡化 CSS 的一行文標示方法，還有其他的方式，介紹如下：   margin：上 右 下 左; (四個值)   如上方例子所示   margin：上 左右 下; (三個值)  
margin: [上面邊界值] [右邊與左邊邊界值] [下面邊界值]
 
See the Pen margin：上 左右 下; (三個值) by Tedutw (@Tedutw) on CodePen.
  margin：上下 左右; (二個值)  
margin: [上面與下面邊界值] [右邊與左邊邊界值]
 
See the Pen margin：上下 左右; (二個值) by Tedutw (@Tedutw) on CodePen.
  margin：上下左右; (一個值)  
margin: [上下左右邊界值]
 
See the Pen margin：上下左右; (一個值) by Tedutw (@Tedutw) on CodePen.