Html 如何在表的行之间插入间隙?

Html 如何在表的行之间插入间隙?,html,css,django,Html,Css,Django,我想在输入表单中的输入框之间添加间隙。 他们挤在一起,看起来不太好。 因此,输入表单看起来和感觉都很好…表单是从views.py传递的对象 createcustomer.html {% extends 'customer/base.html' %} {% block title %}Create Customer{% endblock %} {% block body %} <div class="container-fluid" style="backgrou

我想在输入表单中的输入框之间添加间隙。 他们挤在一起,看起来不太好。 因此,输入表单看起来和感觉都很好…表单是从views.py传递的对象

createcustomer.html

 {% extends 'customer/base.html' %}
    {% block title %}Create Customer{% endblock %}

    {% block body %}
    <div class="container-fluid" style="background-color: #f2f2f2; width:100%; height:135%;" >
        <div class="row ">
        <div class="col-lg-4"></div>
        <div class="col-lg-8 text-left" align="center">
            <h2>Create a Customer</h2>
        <form action="." method="post">
            <div class="form-group" >
            {% csrf_token %}
            <table>
                <tr style="width:100%;" class="highlight">
                    <td>First Name:</td>
                    <td>{{form.fname}}</td>
                </tr>
                <tr>
                    <td>Last Name:</td>
                    <td>{{form.lname}}</td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td>{{form.email}}</td>
                </tr>
                <tr>
                    <td>Address:</td>
                    <td>{{form.address}}</td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td>{{form.city}}</td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td>{{form.state}}</td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td>{{form.zip}}</td>
                </tr>
                <tr>
                    <td>Username:</td>
                    <td>{{form.uname}}</td>
                </tr>
                <tr>
                    <td>Phone:</td>
                    <td>{{form.phone}}</td>
                </tr>
               </table>
            <div style="margin-left:200px; margin-top:20px;margin-bottom:20px">
            <input type="submit" class="btn btn-success" value="Submit">
            </div></div>
        </form>
        </div>
            </div>
    </div>
    {%endblock%}
将表格添加到单元格间距和单元格填充

您可以尝试使用css:

table tr {
    margin-bottom: 10px;
    display: table;
}

您可以通过应用类和css将填充应用于输入本身:

HTML


这将在输入表单周围创建空间,给它喘息的空间。

因为您使用的是引导,所以您应该只使用表单控件类
table tr {
    margin-bottom: 10px;
    display: table;
}
<input id="padded" type="submit" class="btn btn-success" value="Submit">
#padded { 
padding: 10px;
}