CSS Border & Padding & Margin

Border

Border style

The border-style property specifies what kind of border to display.

該性質指定了要顯示哪一種邊框。

Note: None of the border properties will have ANY effect unless the border-style property is set!

注意,除非設定 border-style 性質,否則任何 border 性質(如:border width、border color...)都不會產生效果

border-style 可能的取值:

  • none: no border
  • dotted: 小圓點(小方塊)的
  • dashed: 虛線的
  • solid: 實線邊框
  • double: 雙線邊框,邊框之間的距離等於 border-width value 邊框寬度值
  • groove: 3D紋理(槽)邊框
  • ridge: 3D隆起的
  • inset: 3D嵌入的
  • outset: 3D突出的
  • hidden: The same as "none", except in border conflict resolution for table elements

border-style 可以同時擁有1到4個值,對 border-widthborder-color同樣適用。

上 右 下 左 -->順時針!

  • border-style: dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed
  • border-style: dotted solid double;
    • top border is dotted
    • right and leftborders are solid
    • bottom border is double
  • border-style: dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid
  • border-style: dotted;
    • all four borders are dotted

Tip: 還可單獨對一條邊的邊框進行設定,對 border-widthborder-color 同樣適用。

  • border-top-style, border-right-style, border-bottom-style, border-left-style

Border width

The border-width property is used to set the width of the border.

該性質用於設定邊框寬度。

The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick

可用px設定確定的值表示,也可以用這三個預定義的值之一。

Border color

The border-color property is used to set the color of the borders

該性質用於設定邊框的顏色。

The color can be set by: name, RGB, HEX, you can also set the border color to transparent

If the border color is not set it is inherited from the color property of the element.

如果沒有明確設定邊框顏色,則它的值將繼承該元素的color性質的值。

用border實現縮寫

可使用 border來一次性設定邊框四個邊的樣式,如果有一個值沒有設定,也是允許的。但應遵循的順序如下:

  • border-width 默認值: medium
  • border-style (required)默認值: none
  • border-color 默認值: the color of the element
border:5px solid red;

Tip: 同樣的,可以只針對一條邊來一次性設定邊框樣式。規則同上。

  • border-top, border-right, border-bottom, border-left

Padding

The CSS padding properties define the space between the element border and the element content.

該性質定義了元素的邊框和內容區域之間的空隙。

可能的取值:

  • length (in px, pt, cm, etc.) 默認值爲 0
  • % 以包含元素的百分比來表示

同 border 一樣,可以針對每一條邊單獨設定內邊距,也可以使用 padding 性質,一次全部設定。 

單邊設定: padding-top, padding-right, padding-bottom, padding-left

四條邊一起設定,使用 padding 屬性名,規則同 border-style:
  • padding: 25px 50px 75px 100px;
    • top padding is 25px
    • right padding is 50px
    • bottom padding is 75px
    • left padding is 100px
  • padding: 25px 50px 75px;
    • top padding is 25px
    • right and left paddings are 50px
    • bottom padding is 75px
  • padding: 25px 50px;
    • top and bottom paddings are 25px
    • right and left paddings are 50px
  • padding: 25px;
    • all four paddings are 25px

Margin

The CSS margin properties define the space around elements (outside the border).

該性質定義了元素外環繞元素的空間,外邊距。

注意:

The margin does not have a background color, and is completely transparent.

外邊距沒有背景色,是完全透明的。

The padding is affected by the background color of the element.

而內邊距要受到元素背景色的影響。

可能的取值:

  • auto: The browser calculates a margin 瀏覽器計算外邊距
  • length: in px, pt, cm, etc.) 默認值爲 0
  • %: in percent % of the width of the containing element
  • inherit: 繼承父元素

It is also possible to use negative values, to overlap content. 

外邊距可以取負值,因爲兩個元素可以互相重疊

單邊設定縮寫方法同padding.


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章