html - 无法在表单元素之间添加边距

Question

我尝试创建一个表单并在类 formGroup 中的表单元素之间添加一些边距作为边距 10px 0；但它不起作用，我不确定为什么会这样。我感谢您的帮助。这是 HTML

<div class="registrationForm">
<h2>Please fill in the form below to register</h2>
<form class="form">
<div class="formGroup">
    <label class="formLabel">First Name</label>
    <div class="formField">
        <input type="text">
    </div>
</div>

<div class="formGroup">
    <label class="formLabel">Last Name</label>
    <div class="formField">
        <input type="text">
    </div>
</div>

<div class="formGroup">
    <label class="formLabel">Email Address</label>
    <div class="formField">
        <input type="text">
    </div>
</div>

<div class="formGroup">
    <label class="formLabel">Password</label>
    <div class="formField">
        <input type="text">
    </div>
</div>

<div class="formGroup">
    <label class="formLabel">Phone</label>
    <div class="formField">
        <input type="text">
    </div>
</div>

<div class="formGroup">
    <label class="formLabel">Gender</label>
    <div class="formField">
        <input type="text">
    </div>
</div>

<div class="formGroup">
    <label class="formLabel">Date of birth</label>
    <div class="formField">
        <input type="text">
    </div>
</div>

<div class="formGroup">
    <label class="formLabel"></label>
    <div class="formField">
        <input type="submit">
    </div>
</div>
</form>
</div>

还有这里的 CSS

.registrationForm
{
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px; 
padding: 3% 5%; 
margin-bottom: 3%;
overflow: auto;
}

.registrationForm .form
{   
margin: 10px auto;
width: 90%;
//border: 1px solid black;
overflow: auto;
}

.registrationForm .form .formGroup
{
width: 100%;
margin: 10px 0;
}

.registrationForm .form .formGroup .formLabel
{
width: 20%;
float: left;
//text-align: right;
}

.registrationForm .form .formGroup .formField
{
width: 80%;
float: left;
}

谢谢

Answer 1

您只是将 margin-bottom 放在了错误的位置。它应该在 formField 中。

.registrationForm
{
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px; 
padding: 3% 5%; 

overflow: auto;
}

.registrationForm .form
{   
margin: 10px auto;
width: 90%;
//border: 1px solid black;
overflow: auto;
}

.registrationForm .form .formGroup
{
width: 100%;
}

.registrationForm .form .formGroup .formLabel
{
width: 20%;
float: left;
//text-align: right;
}

.registrationForm .form .formGroup .formField
{
width: 80%;
float: left;
margin-bottom: 3%;
}

<div class="registrationForm">
<h2>Please fill in the form below to register</h2>
<form class="form">
<div class="formGroup">
    <label class="formLabel">First Name</label>
    <div class="formField">
        <input type="text">
    </div>
</div>

<div class="formGroup">
    <label class="formLabel">Last Name</label>
    <div class="formField">
        <input type="text">
    </div>
</div>

<div class="formGroup">
    <label class="formLabel">Email Address</label>
    <div class="formField">
        <input type="text">
    </div>
</div>

<div class="formGroup">
    <label class="formLabel">Password</label>
    <div class="formField">
        <input type="text">
    </div>
</div>

<div class="formGroup">
    <label class="formLabel">Phone</label>
    <div class="formField">
        <input type="text">
    </div>
</div>

<div class="formGroup">
    <label class="formLabel">Gender</label>
    <div class="formField">
        <input type="text">
    </div>
</div>

<div class="formGroup">
    <label class="formLabel">Date of birth</label>
    <div class="formField">
        <input type="text">
    </div>
</div>

<div class="formGroup">
    <label class="formLabel"></label>
    <div class="formField">
        <input type="submit">
    </div>
</div>
</form>
</div>