CSS 如何给表格行
添加边距

在本文中，我们将介绍如何使用CSS给表格中的行元素

添加边距。

阅读更多：CSS 教程

什么是表格行

在HTML中，表格是一种常用的元素用于展示具有行和列的数据。而表格的行元素就是

标签。一般情况下，表格的每一行都会包含多个单元格

，用于展示数据。

使用margin属性添加边距

要给表格行添加边距，我们可以使用CSS中的margin属性。margin属性用于定义元素的边距，可以分别定义元素的上、右、下、左四个方向的边距。

下面是一个示例代码，演示了如何为表格行

添加上下边距：

tr {
  margin-top: 10px;
  margin-bottom: 10px;
}

在上面的代码中，我们为表格行

定义了10像素的上边距和下边距。

注意事项

在使用margin属性给表格行添加边距时，需要注意以下几点：

1. margin属性对表格行的影响

margin属性只对块级元素生效，而表格行

属于行内元素。所以直接使用margin属性对表格行进行调整是无效的。要想为表格行添加边距，需要将表格行设置为块级元素。

可以通过以下方式将表格行转换为块级元素：

tr {
  display: block;
}

2. 使用padding替代margin

如果表格行无法转换为块级元素或不想改变元素的类型，我们可以使用padding属性来模拟实现边距的效果。padding属性定义了元素内边距的大小。

下面的示例代码演示了如何使用padding属性给表格行添加边距：

tr {
  padding-top: 10px;
  padding-bottom: 10px;
}

在上面的代码中，我们为表格行

定义了10像素的上边距和下边距。

3. 影响相邻元素的布局

在给表格行添加边距时，需要注意边距对相邻元素布局的影响。如果边距过大，可能会导致相邻元素之间的间距变大，影响整体布局的美观性。

示例

下面是一个完整的示例代码，展示了如何给表格行

添加边距：

<!DOCTYPE html>
<html>
<head>
    <style>
    tr {
      display: block;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
        <tr>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
    </table>
</body>
</html>

在上面的示例中，我们给表格行

添加了10像素的上边距和下边距，通过将表格行设置为块级元素来实现。