本文介绍了如何使用CSS来调整HTML表格中行(tr)之间的距离。通过将tr元素的display属性设置为block，并利用margin属性设定间距，可以实现行间距的定制。示例代码展示了具体的实现方法，包括设置table的border-collapse属性、td的padding和border，以及tr的display和margin。
CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。
tr之间距离可以通过设置 tr 的外边距(margin)来实现，但是注意必须先把tr的显示属性设置为块体(block)元素：tr {
display: block;
/*将tr设置为块体元素*/
margin: 2px 0;
/*设置tr间距为2px*/
}
示例如下：
创建HTML元素
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
添加css样式table {
border - collapse: collapse;
}
td {
width: 90px;
padding: 5px;
border: 1px solid green;
}
tr {
display: block;
/*将tr设置为块体元素*/
margin: 2px 0;
/*设置tr间距为2px*/
显示效果
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
注释：允许使用负值。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
