在css中，border-spacing属性用于表格的边框在“分离”的状态下，设置相邻单元格的边框间的距离。下面本篇文章就来带大家了解一下border-spacing属性的使用方法，希望对大家有所帮助。
CSS border-spacing属性
border-spacing属性会在表格边框“分离”时，设置行和单元格的边框在横向和纵向上的间距。【视频教程推荐：CSS教程】
它可以有1~2个length值：
● 如果提供全部两个length值时，第一个作用于横向间距，第二个作用于纵向间距。
立即学习“前端免费学习笔记（深入）”；
● 如果只提供一个length值时，这个值将作用于横向和纵向上的间距。
说明：该border-spacing属性的作用等同于HTML标签属性cellspacing。
注：只有当表格边框各自独立（即border-collapse属性设置separate时）此属性才起作用。
CSS border-spacing属性的使用示例
下面通过简单代码示例来看看border-spacing属性是如何设置表格边框间的距离：
示例1：在设置border-collapse: collapse;时：
table,td,th {border: 1px solid black;}td,th{padding: 5px 20px;}#table1 {border-collapse: collapse;border-spacing: 15px;}border-spacing: 15px:
使用“border-collapse:collapse”时，border-spacing属性无效：
| 姓名 | 年龄 |
|---|---|
| Peter | 20 |
| Lois | 20 |
效果图：
示例2：
table,td,th {border: 1px solid black;}td,th{padding: 5px 20px;}#table2 {border-collapse: separate;border-spacing: 15px;}#table3 {border-collapse: separate;border-spacing: 15px 30px;}border-spacing: 15px:
使用“border collapse:separate”时，border spacing属性可用于设置单元格之间的间距：
| 姓名 | 年龄 |
|---|---|
| Peter | 20 |
| Lois | 20 |
border-spacing: 15px 30px:
使用两个length值（第一个值设置水平间距，第二个值设置垂直间距）：
| 姓名 | 年龄 |
|---|---|
| Peter | 20 |
| Lois | 20 |
效果图：
代码说明：
边框独立时（border-collapse属性设置separate时），border – spacing生效；相邻边被合并时（border-collapse属性设置collapse时），border – spacing属性无效。
以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注创想鸟相关教程栏目！！！
以上就是CSS如何设置表格边框间的距离？border-spacing属性的使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1614204.html
微信扫一扫 
支付宝扫一扫 
