close

前端工程師一定要會的CSS盒子模型一次搞懂!! (邊框留白篇)

上一篇給前端工程師的CSS盒子模型邊界篇大家都看了嗎? 今天要來說的是邊康留白篇~ 快學起來吧!!

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

CSS-box-model
在盒子模式中，內容 (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盒子模型一次搞懂!! (邊界篇)

HTML5教學----CSS基礎語法:字型與文字排列相關順序

前端工程師和後端工程師的差異,想學網頁的你也一定要知道!

你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?

最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?

你知道SEO優化最佳幫手的正確打開方式嗎? 看這篇就對了!!

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

arrow
arrow
    文章標籤
    前端工程師 前端 工程師 CSS 語法 程式
    全站熱搜

    Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄