CSS 內邊距與外邊距屬性

2021-08-29 16:12:04 字數 1829 閱讀 9655

外邊距是指用標籤設定的內容外部的邊距。它可以很好地將元素和旁邊的其他元素隔開。

1.居中 auto

使用auto屬性值可以將整個被包含在內的內容水平居中,和align="center"屬性值有些相似。

注意:使用auto屬性值來對內容進行居中,必須準確的填寫內容的總體寬度,auto以填寫的寬度未居中標準。

語法:margin: 0 auto;

定義居中:

上外邊距 margin-top

使標籤內的內容與上邊的其他文字內容隔開一定的距離

語法:margin-top:邊距值;

定義上外邊距:

3.右外邊距 margin-right    左外邊距 margin-left   下外邊距 margin-bottom

這3個屬性分別設定右、左、下外邊距,用法與上外邊距類似,這裡不再舉例

4.綜合宣告外邊距 margin

通過margin屬性把 4 個不同外邊距屬性值全部放在一起,對4個外邊距一起進行宣告。

語法(例):

1.margin:10px 20px 30px 40px;        綜合宣告外邊距為10px,外邊距為20px,外邊距為30px,外邊距為40px。

2.margin:20px 30px 40px;        綜合宣告外邊距為20px,外邊距為30px,外邊距為40px。

3.margin:10px 20px;          綜合宣告外邊距為10px,外邊距為20px。

4.margin:10px;           綜合宣告外邊距為10px。

內邊距與外邊距正好相反,內邊距是指用標籤設定的內容內部的邊距。通過內邊距,可以很好的規定元素在標籤設定的內部的顯示位置。

1.上內邊距 padding-top

通過padding-top屬性可以設定上內邊距,也就是標籤設定的元素內的內容與元素頂部的距離

語法:padding-top:n;

定義上內邊距:

2.右內邊距 padding-right  下內邊距 padding-bottom  左內邊距 paing-left

這3個屬性分別設定右、下、左內邊距,用法與上內邊距類似,這裡不再舉例。

注意:雖然內邊距是被標籤計算在內的,但是內邊距的寬度和高度也是不被設定的寬度和高度計算在內的,所以使用時,要在設定的寬度和高度上再加上內邊距的寬度和高度。

綜合宣告內邊距 padding

和綜合宣告外邊距一樣,通過padding屬性把 4 個不同內邊距屬性值全部放在一起,對4個內邊距一起進行宣告(用法與外邊距一樣)。

內邊距與外邊距

內邊距就是邊框與內容之間的距離 padding top padding right padding bottom padding left padding 上 右 下 左 當省略上右下左中的乙個時,預設與對面的值保持一致,即下對應上 左對應右 我是內容我是內容我是內容 我是內容我是內容我是內容 我是...

css 內邊距 外邊距 邊框

1.內邊距css padding 屬性定義元素邊框與元素內容之間的空白區域。例子 padding left 20px 屬性 描述padding 簡寫屬性。作用是在乙個宣告中設定元素的所內邊距屬性。padding bottom 設定元素的下內邊距。padding left 設定元素的左內邊距。padd...

CSS內邊距和外邊距

一 內邊距 css padding 屬性定義內邊距,即邊框與元素內容之間的空白區域 padding 屬性接受長度值或百分比值,但不允許使用負值 可以依次表達,也可以按照上右下左的順序分別設定各邊的內邊距,各邊均可以使用不同的單位或百分比值 例如h1 等效於 h1 百分數值是相對於其父元素的 widt...