Unusual gapping with floats and text-aligns

Question

I have my company name on the left and my email on the right. I have the email set up like this:

<div style="color: white; float: right; padding-right: 10px; text-align:right">
    <p style="font-size: 16px;">E-mail</p>
    <p style="font-size: 20px; text-decordation: none;">[email protected]</p>
</div>      

As I am unable to upload any photos, this might be hard to explain. There is a verticle gap (like the height of the company name) between the word "email" and my actual email.

Here is the entire (relevant) HTML:

HTML:

<div style="margin: 0 auto; overflow: auto;">
    <div style="background: #000; height: 80px; width: 100%; overflow: hidden;">
        <h1 style="font-family: Snell Roundhand, cursive; padding-left: 10px; color: white; float: left;">New Trend Photography</h1>
        <div style="color: white; float: right; padding-right: 10px; text-align:right">
            <p style="font-size: 16px;">E-mail</p>
            <p style="font-size: 20px; text-decordation: none;">[email protected]</p>
        </div>      
    </div>
</div>

Answer 1

This gap is because of margin and padding p element.

Use :

div p {
  margin: 0;
  padding: 0;
}

If you want ,remove gap between email and my actual email only.

So use:

div p {
  margin: 0;
  padding: 0;
}

div p:first-child {
  margin-top: 20px;
}

Demo