Cannot add margin between form elements - html

Question

I tried to create a form and add some margin between form element in the class formGroup as margin 10px 0;
But it is not working and I am not sure why is that happening. I appreciate your help.
Here is the 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>
and the CSS here
.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;
}
Thank you

Answer 1

You're just putting the margin-bottom in the wrong place. it should be in 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>

Answer 2

You need to clear the floats contained within your .formGroup elements, currently .formGroup has no height so any margin applied is swallowed by the height of the children within it.
Put this on your .formGroup selector
overflow: hidden;
margin: 10px 0;
See this example: https://jsfiddle.net/yuqvu6w4/1/

Answer 3

you only need to add "overflow:hidden" to your class
".registrationForm .form .formGroup"
your final code will be :
.registrationForm .form .formGroup {
width: 100%;
margin: 10px 0;
**overflow: hidden;**
}
it will work without interrupting other code