1. 设置内边距
| 值 | 说明 |
|---|---|
| length | 规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px |
| % | 规定基于父元素的宽度的百分比的填充 |
| inherit | 指定应该从父元素继承padding |
padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。
- padding:10px 5px 15px 20px;
- 上填充是 10px
- 右填充是 5px
- 下填充是 15px
- 左填充是 20px
- padding:10px 5px 15px;
- 上填充是 10px
- 右填充和左填充是 5px
- 下填充是 15px
- padding:10px 5px;
- 上填充和下填充是 10px
- 右填充和左填充是 5px
- padding:10px;
- 所有四个填充都是 10px
注意： 负值是不允许的。
2. 设置外边距
属性值
| 值 | 描述 |
|---|---|
| auto | 浏览器计算外边距。 |
| length | 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。 |
| % | 规定基于父元素的宽度的百分比的外边距。 |
| inherit | 规定应该从父元素继承外边距。 |
属性定义及使用说明
margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。
实例:
- margin:10px 5px 15px 20px;
- 上边距是 10px
- 右边距是 5px
- 下边距是 15px
- 左边距是 20px
- margin:10px 5px 15px;
- 上边距是 10px
- 右边距和左边距是 5px
- 下边距是 15px
- margin:10px 5px;
- 上边距和下边距是 10px
- 右边距和左边距是 5px
- margin:10px;
- 所有四个边距都是 10px
注意： 负值是允许的。
3. 边框
属性值
| 值 | 说明 |
|---|---|
| border-width | 指定边框的宽度 |
| border-style | 指定边框的样式 |
| border-color | 指定边框的颜色 |
| inherit | 指定应该从父元素继承border属性值 |
border-style属性设置一个元素的四个边框的样式。此属性可以有一到四个值。
实例:
border-style:dotted solid double dashed;
- 上边框是点状
- 右边框是实线
- 下边框是双线
- 左边框是虚线
border-style:dotted solid double;
- 上边框是点状
- 右边框和左边框是实线
- 下边框是双线
border-style:dotted solid;
- 上边框和下边框是点状
- 右边框和左边框是实线
border-style:dotted;
- 所有4个边框都是点状
border-color
| 值 | 说明 |
|---|---|
| color | 指定背景颜色。在CSS颜色值查找颜色值的完整列表 |
| transparent | 指定边框的颜色应该是透明的。这是默认 |
| inherit | 指定边框的颜色，应该从父元素继承 |
border-color属性设置一个元素的四个边框颜色。此属性可以有一到四个值。
实例:
border-color:红，绿，蓝,粉红色;
- 上边框是红色
- 右边框是绿色
- 底部边框是蓝
- 左边框是粉红色
border-color：红，绿，蓝;
- 上边框是红色
- 左，右边框是绿色
- 底部边框是蓝
border-color：红，绿;
- 顶部和底部边框是红色
- 左右边框是绿色
border-color：红色;
- 所有四个边框是红色
注意：请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。
CSS border-width 属性
border-width属性设置一个元素的四个边框的宽度。此属性可以有一到四个值。
实例:
border-width:thin medium thick 10px;
- 上边框是细边框
- 右边框是中等边框
- 下边框是粗边框
- 左边框是 10px 宽的边框
border-width:thin medium thick;
- 上边框是细边框
- 右边框和左边框是中等边框
- 下边框是粗边框
border-width:thin medium;
- 上边框和下边框是细边框
- 右边框和左边框是中等边框
border-width:thin;
- 所有4个边框都是细边框
