一、边框border(会影响盒子的宽高)
1、为边框指定宽度:border-width
2、为边框指定样式:border-style
3、为边框指定颜色:border-color
4、边框简写:border:1px solid red(没有顺序)
5、合并相连单元格边框:border-collapse:collapse
二、内边距padding(会影响盒子的宽高)
1、内边距
属性 | 作用 |
---|---|
padding-top | 上内边距 |
padding-right | 右内边距 |
padding-bottom | 下内边距 |
padding-left | 左内边距 |
2、内边距简写:
值的个数 | 表达意思 |
---|---|
padding:10px; | 1个值,代表上下左右都是10像素内边距 |
padding:10px 20px; | 2个值,代表上下内边距10像素,左右内边距20像素 |
padding:10px 20px 30px; | 3个值,代表上内边距10像素,左右内边距20像素,下内边距30像素 |
padding:10px 20px 30px 40px; | 4个值,上10像素,右20像素,下30像素,左40像素(顺时针) |
三、外边距 margin
1、外边距
属性 | 作用 |
---|---|
margin-top | 上外边距 |
margin-right | 右外边距 |
margin-bottom | 下外边距 |
margin-left | 左外边距 |
2、外边距简写:
值的个数 | 表达意思 |
---|---|
margin:10px; | 1个值,代表上下左右都是10像素外边距 |
margin:10px 20px; | 2个值,代表上下外边距10像素,左右外边距20像素 |
margin:10px 20px 30px; | 3个值,代表上外边距10像素,左右外边距20像素,下外边距30像素 |
margin:10px 20px 30px 40px; | 4个值,上10像素,右20像素,下30像素,左40像素(顺时针) |