CSS 行与行之间的间距

Question

我在这里发现了一个类似的问题

Space between two rows in a table?

但我没有想象出答案，而且每个答案都不一样，听起来好像没有达成一致

我正在动态显示一个表格，只需要调整 CSS 以便行之间有空间，由一行分隔，仅此而已。我不希望这些行看起来相互挤压。他们说的是填充细胞。我将 cellpadding 硬编码到 html 表中，但它没有任何效果。唯一真正改变外观的是单元格间距，但它的光学效果很差。

我不明白他们是如何在下面写下答案的，因为他们使用了这么多大括号，据我所知，您在 CSS 文件中创建了一个以“。”开头的类。和 2 个大括号，把所有的东西都放进去，但他们写的是这样的:

table tr{ float: left width: 100%; }

tr.classname { margin-bottom:5px; }

但是他们开始时没有声明类，当他们在中间时，他们为 tr 创建类。我不明白。

有谁知道如何以正确的方式放置代码？

Answer 1

您可以尝试这样的方式让您的 CSS 让行间距良好，并由水平线分隔:

table {
    border-collapse: collapse; 
}

td {
    padding: 10px 0;     /* 10px top & bottom padding, 0px left & right */
    border-width: 1px 0; /*  1px top & bottom border,  0px left & right */
    border-color: #000;
    border-style: solid;
}

每行上下都有一个边框，单元格内容上下各有 10 个像素的间距。

---

如果您不想在表格的顶部和底部设置边框，您可以稍微修改一下 CSS:

table {
    border-collapse: collapse;
}

td {
    padding: 10px 0; /* 10px top & bottom padding, 0px left & right */
}

.separating_line {
    border-top: 1px #000 solid; /* top border only */
}

然后将除第一行之外的所有行赋予 .separating_line 类，如下所示:

<table>
    <tr>
        <td>content</td>
    </tr>
    <tr class="separating_line">
        <td>content</td>
    </tr>
    <tr class="separating_line">
        <td>content</td>
    </tr>
</table>

---

我写的 CSS 可以像你原来的帖子一样重写:

tr.separating_line {
    border-top: 1px #000 solid; /* top border only */
}

这样这种样式只适用于具有分界线类的 tr 元素，如果您想使用分界线类以不同的方式设置不同元素的样式，这可能会很有用。

tr.separating_line {
    border-top: 1px #000 solid; /* top border only */
}
div.separating_line {
    border-top: 3px #F00 dashed;
}

---

如果我误解了您的问题，我深表歉意，但希望我的回答对您有所帮助。 =)