CSS 樣式CSS margin 外緣及邊界樣式範例

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

margin 屬性

於 CSS 中使用 margin 屬性定義元素的外邊距,設定元件矩框的 top, right, bottom, left 之外緣寬度。外緣是指元件的邊線與外界內容的距離,區間為空白的透明狀態。margin 屬性使用長度單位為像素、英寸、毫米或百分比值及可用負值(負值會被移到視區之外)。

padding 屬性

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

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

CSS border, padding, and margin concepts

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


CSS 排版

框線 border

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

內邊距 padding

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

外邊距 margin

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

Modification in