Removing white spacing between stacked elements in CSS - css

Question

I am trying to remove spacing between elements stacked on each other.
This is what i have:
input[type="text"] {
width: 40%;
height: 30px;
border-radius: 29px;
border-style: none;
padding-right: 100px;
padding-left: 30px;
border-width: 0;
}
input[type="submit"] {
margin-left: -100px;
height: 30px;
width: 100px;
border-width: 0;
border-radius: 29px;
background: blue;
color: white;
-webkit-appearance: none;
}
body {
background-color: black;
}
<br/>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" placeholder="Enter your email"><input type="submit">
</form>
I have tried top:0; and bottom:0; but it does not seem to solve my problem in this example.

Answer 1

Remove padding-top and padding-bottom on input[type="text"]
padding-top: 0px;
padding-bottom: 0px;
input[type="text"] {
padding-top: 0px;
padding-bottom: 0px;
width: 40%;
height:30px;
border-radius: 29px;
border-style:none;
padding-right:100px;
padding-left:30px;
border-width: 0;
}
input[type="submit"] {
margin-left: -100px;
height:30px;
width: 100px;
border-width: 0;
border-radius: 29px;
background: blue;
color: white;
-webkit-appearance: none;
}
body {
background-color: black;
}
<br/>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" placeholder="Enter your email"><input type="submit">
</form>

Answer 2

Remove the top bottom padding of input[type="text"].
input[type="text"] {
width: 40%;
height: 30px;
border-radius: 29px;
border-style: none;
padding-right: 100px;
padding-left: 30px;
padding-top: 0;
padding-bottom: 0;
}

Answer 3

I removed the height property from both elements and added it to the container, the form. Then added display: flex to the form.
form {
height: 30px;
display: flex;
}
input[type="text"] {
width: 40%;
border-radius: 29px;
border-style: none;
padding-right: 100px;
padding-left: 30px;
border-width: 0;
}
input[type="submit"] {
margin-left: -100px;
width: 100px;
border-width: 0;
border-radius: 29px;
background: blue;
color: white;
-webkit-appearance: none;
}
body {
background-color: black;
}
<br/>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" placeholder="Enter your email"><input type="submit">
</form>