Question

我有一个表单，但是为什么输入没有任何垂直空间，所以它们没有彼此分开。

有趣的是，它在我的代码段中有一些空间，但在我的环境中没有。

有人可以告诉我如何在此处添加更多垂直空间吗？

我尝试将line-height添加到类form-example中，但是没有任何效果。这是我的表格：

<form action="" method="post" class="form-example">
    <table>
        <tr class="edit-form-standard-dauer">
            <td>
                <label for="edit-standard-dauer">Standard dauer (Wochen): </label>
            </td>
            <td>
                <input type="text" id="edit-standard-dauer">
            </td>
        </tr>
        <tr class="edit-form-verlangerung-dauer">
            <td>
                <label for="edit-verlangerung-dauer">Verlängerung Dauer (Wochen): </label>
            </td>
            <td>
                <input type="text" id="edit-verlangerung-dauer">
            </td>
        </tr>

Answer 1

添加border-collapse: separate;并 border-spacing: 1em;到您的table

.table-border{
border-collapse: separate;
border-spacing: 1em;
}

<form action="" method="post" class="form-example">
        <table class="table-border">
            <tr class="edit-form-standard-dauer">
                <td>
                    <label for="edit-standard-dauer">Standard dauer (Wochen): </label>
                </td>
                <td>
                    <input type="text" id="edit-standard-dauer">
                </td>
            </tr>
            <tr class="edit-form-verlangerung-dauer">
                <td>
                    <label for="edit-verlangerung-dauer">Verlängerung Dauer (Wochen): </label>
                </td>
                <td>
                    <input type="text" id="edit-verlangerung-dauer">
                </td>
            </tr>

Answer 2

尝试为td设置填充以获取间距。在表格中，它很难增加边距。

td {
  padding-bottom: 15px;
}

<form action="" method="post" class="form-example">
   <table>
        <tr class="edit-form-standard-dauer">
            <td>
                <label for="edit-standard-dauer">Standard dauer (Wochen): </label>
            </td>
            <td>
                <input type="text" id="edit-standard-dauer">
            </td>
        </tr>
        <tr class="edit-form-verlangerung-dauer">
            <td>
                <label for="edit-verlangerung-dauer">Verlängerung Dauer (Wochen): </label>
            </td>
            <td>
                <input type="text" id="edit-verlangerung-dauer">
            </td>
        </tr>
   </table>
</form>

如何在表单的输入之间添加垂直空间？

2 个答案: