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-width、border-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-width、border-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.