CSS 外緣及邊框(邊界)樣式

margin 屬性

例如 <div> 於 CSS 中使用 margin 屬性定義元素的外邊距,設定元素框的 margin : top, right, bottom, left 之外緣寬度。margin 外緣是指 html 元素的邊線與外界內容的距離,距離間為空白的透明狀態。

margin 屬性使用長度單位為 px 像素、英寸、毫米或 % 百分比值及可用負值「負值會被移到視區之外」。

margin-top: 15px;
margin-right:10px;
margin-bottom:15px;
margin-left:10px;

margin 縮寫語法

margin:15px 10px 15px 10px; /* 縮寫語法 = 順序為上右下左 */
margin:15px 10px; /* 縮寫語法 = 前面為上下, 後面為右左 */

padding 屬性

於 CSS 中使用 padding 屬性定義元素的內邊距,設定元件矩框的 top, right, bottom, left 之內緣寬度。內緣是指元素的邊線內徑與內容的距離,區間為空白的透明狀態。padding 屬性使用長度值或百分比值,但不允許使用負值。


CSS border, padding, and margin concepts

div-A {border: 3px solid #1f3d35;margin:8px;}
div-B {padding: 10px;}



CSS 排版

框線 border

框線 border 為矩框外圍的邊距屬性,如單位為 3px 元件實際 width 寬度、height 高度亦會增加,會佔有空間計算版面寬高時需注意到。使用框線的樣式及顏色是網頁排版上常會用到的。

可以參考使用 box-sizing:border-box 計算寬度及高度時,為內含還是外加。


外邊距 margin

外邊距 margin 的意義就是元素與元素之間的距離。

內邊距 padding

內邊距 padding 會在元素內容的周圍增加指定的空間;在未指定元素寬高時該元素的內容就會受到 padding 所擠壓。