clipboard

元素框的最內部分是實際的內容,直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距,外邊距預設是透明的,因此不會遮擋其後的任何元素。

提示:背景應用於由內容和內邊距、邊框組成的區域。

一、CSS 內邊距屬性

屬性 描述
padding 簡寫屬性。作用是在一個宣告中設定元素的所內邊距屬性。
padding-bottom 設定元素的下內邊距。
padding-left 設定元素的左內邊距。
padding-right 設定元素的右內邊距。
padding-top 設定元素的上內邊距。

屬性值:

  • auto:瀏覽器計算內邊距。
  • length:規定以具體單位計的內邊距值,比如畫素、釐米等。預設值是 0px。
  • %:規定基於父元素的寬度的百分比的內邊距。
  • inherit:規定應該從父元素繼承內邊距。

    二、CSS 邊框屬性

    1、border

    屬性 描述
    border 簡寫屬性,用於把針對四個邊的屬性設定在一個宣告。
    border-bottom 簡寫屬性,用於把下邊框的所有屬性設定到一個宣告中。
    border-left 簡寫屬性,用於把左邊框的所有屬性設定到一個宣告中。
    border-right 簡寫屬性,用於把右邊框的所有屬性設定到一個宣告中。
    border-top 簡寫屬性,用於把上邊框的所有屬性設定到一個宣告中。

    2、border-style

    屬性 描述
    border-style 用於設定元素所有邊框的樣式,或者單獨地為各邊設定邊框樣式。
    border-bottom-style 設定元素的下邊框的樣式。
    border-left-style 設定元素的左邊框的樣式。
    border-right-style 設定元素的右邊框的樣式。
    border-top-style 設定元素的上邊框的樣式。

    屬性值:

  • none:定義無邊框。
  • hidden:與 "none" 相同。不過應用於表時除外,對於表,hidden 用於解決邊框衝突。
  • dotted:定義點狀邊框。在大多數瀏覽器中呈現為實線。
  • dashed:定義虛線。在大多數瀏覽器中呈現為實線。
  • solid:定義實線。
  • double:定義雙線。雙線的寬度等於 border-width 的值。
  • groove:定義 3D 凹槽邊框。其效果取決於 border-color 的值。
  • ridge:定義 3D 壟狀邊框。其效果取決於 border-color 的值。
  • inset:定義 3D inset 邊框。其效果取決於 border-color 的值。
  • outset:定義 3D outset 邊框。其效果取決於 border-color 的值。
  • inherit:規定應該從父元素繼承邊框樣式。

    3、border-width

    屬性 描述
    border-width 簡寫屬性,用於為元素的所有邊框設定寬度,或者單獨地為各邊邊框設定寬度。
    border-bottom-width 設定元素的下邊框的寬度。
    border-left-width 設定元素的左邊框的寬度。
    border-right-width 設定元素的右邊框的寬度。
    border-top-width 設定元素的上邊框的寬度。

    屬性值:

  • thin:定義細的邊框。
  • medium:預設。定義中等的邊框。
  • thick:定義粗的邊框。
  • length:允許您自定義邊框的寬度。
  • inherit“規定應該從父元素繼承邊框寬度。

    4、border-color

    屬性 描述
    border-color 簡寫屬性,設定元素的所有邊框中可見部分的顏色,或為 4 個邊分別設定顏色。
    border-bottom-color 設定元素的下邊框的顏色。
    border-left-color 設定元素的左邊框的顏色。
    border-right-color 設定元素的右邊框的顏色。
    border-top-color 設定元素的上邊框的顏色。
  • color_name:規定顏色值為顏色名稱的邊框顏色(比如 red)。
  • hex_number:規定顏色值為十六進位制值的邊框顏色(比如 #ff0000)。
  • rgb_number:規定顏色值為 rgb 程式碼的邊框顏色(比如 rgb(255,0,0))。
  • transparent:預設值。邊框顏色為透明。
  • inherit:規定應該從父元素繼承邊框顏色。

    三、CSS 外邊距屬性

    屬性 描述
    margin 簡寫屬性。在一個宣告中設定所有外邊距屬性。
    margin-bottom 設定元素的下外邊距。
    margin-left 設定元素的左外邊距。
    margin-right 設定元素的右外邊距。
    margin-top 設定元素的上外邊距。

    屬性值:

  • auto:瀏覽器計算外邊距。 .
  • length:規定以具體單位計的外邊距值,比如畫素、釐米等。預設值是 0px。
  • %:規定基於父元素的寬度的百分比的外邊距。
  • inherit:規定應該從父元素繼承外邊距。

    四、外邊距合併:

    外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

    clipboard[6]