CSS 内边距 和边框

1 : element : 元素。

padding : 内边距,也有资料将其翻译为填充。

border : 边框。

margin : 外边距,也有资料将其翻译为空白或空白边

2:CSS 内边距 :元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。

padding 属性接受长度值或百分比值,但不允许使用负值、

h1 {padding: 10px;}

h1 {padding: 10px 0.25em 2ex 20%;}---》上右下左

padding-top

padding-right

padding-bottom

padding-left

td.test2 {padding: 0.5cm 2.5cm} 这个表格单元的上和下内边距是 0.5cm,左和右内边距是 2.5cm。


    B:CSS 边框

1:定义单边样式

如果您希望为元素框的某一个边设置边框样式,而不是设置所有 4 个边的边框样式,可以使用下面的单边边框样式属性:

border-top-style

border-right-style

border-bottom-style

border-left-style

2:边框的宽度

您可以通过 border-width 属性为边框指定宽度。

3:定义单边宽度

border-top-width

border-right-width

border-bottom-width

border-left-width

4:边框的颜色

设置边框颜色非常简单。CSS 使用一个简单的 border-color 属性,它一次可以接受最多 4 个颜色值。

定义单边颜色

还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同:

border-top-color

border-right-color

border-bottom-color

border-left-color

5:透明边框:border-color: transparent;

6:设置四边框样式

p.dotted {border-style: dotted}

p.dashed {border-style: dashed}

p.solid {border-style: solid}

p.double {border-style: double}

p.groove {border-style: groove}

p.ridge {border-style: ridge}

p.inset {border-style: inset}

p.outset {border-style: outset}

CSS 边框属性

属性描述

border简写属性,用于把针对四个边的属性设置在一个声明。

border-style用于设置元素所有边框的样式,或者单独地为各边设置边框样式。

border-width简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。

border-color简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。

border-bottom简写属性,用于把下边框的所有属性设置到一个声明中。

border-bottom-color设置元素的下边框的颜色。

border-bottom-style设置元素的下边框的样式。

border-bottom-width设置元素的下边框的宽度。

border-left简写属性,用于把左边框的所有属性设置到一个声明中。

border-left-color设置元素的左边框的颜色。

border-left-style设置元素的左边框的样式。

border-left-width设置元素的左边框的宽度。

border-right简写属性,用于把右边框的所有属性设置到一个声明中。

border-right-color设置元素的右边框的颜色。

border-right-style设置元素的右边框的样式。

border-right-width设置元素的右边框的宽度。

border-top简写属性,用于把上边框的所有属性设置到一个声明中。

border-top-color设置元素的上边框的颜色。

border-top-style设置元素的上边框的样式。

border-top-width设置元素的上边框的宽度。

你可能感兴趣的:(CSS 内边距 和边框)