Input and button not aligned horizontally - html

Question

I'm making an email form where people can submit their emails and be part of an email list, in order to do this I have made an input and a button that go side by side. The issue that I am getting is that even though the button and inputs are the exact same height, and should be aligned horizontally perfectly it instead has a pixel difference with the button being a pixel higher than the input. How can I fix this?
#form {
display flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.email-form {
padding: 60px;
margin-top: 85px;
color: #fff;
background: #000;
text-align: center;
}
.form input {
width: 300px;
height: 30px;
margin: 0;
display: inline;
outline: 0 none;
}
.form button {
height: 30px;
width: 90px;
margin: 0;
background: #707070;
color: #fff;
font-weight: 700;
text-transform: uppercase;
text-align: center;
border: none;
cursor: pointer;
display: inline;
outline: 0 none;
}
<div class="form">
<form action="" id="email">
<input type="email" placeholder="Email" /><button type="submit" class="submit"><p>Sign up</p></button>
</form>
</div>

Answer 1

If you change
<p>Sign up</p>
To
<div>Sign up</div>
Or just
Sign up
It should work.
There's a bunch of margin settings on the <p> element that are overflowing and messing up your alignment.

Answer 2

Just remove p tag around the Sign up text.
<button type="submit" class="submit">Sign up</button>
#form {
display flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.email-form {
padding: 60px;
margin-top: 85px;
color: #fff;
background: #000;
text-align: center;
}
.form input {
width: 300px;
height: 30px;
margin: 0;
display: inline;
outline: 0 none;
}
.form button {
height: 30px;
width: 90px;
margin: 0;
background: #707070;
color: #fff;
font-weight: 700;
text-transform: uppercase;
text-align: center;
border: none;
cursor: pointer;
display: inline;
outline: 0 none;
}
<div class="form">
<form action="" id="email">
<input type="email" placeholder="Email" />
<button type="submit" class="submit">Sign up</button>
</form>
</div>