Input and button not aligned horizontally

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>