フロートとテキストアライメントで異常なギャッピング

Question

私は左に私の会社名を、右に私のメールアドレスを持っています。

<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;">newtrendphotography23@gmail.com</p> 
</div>  

私は写真をアップロードすることができないので、これは説明するのが難しいかもしれません。 「電子メール」という単語と実際の電子メールの間には、（企業名の高さのような）頂点の隙間があります。

ここ全体（関連）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;">newtrendphotography23@gmail.com</p> 
     </div>  
    </div> 
</div> 

Answer 1

この隙間が原因マージンおよびパディングp要素です。

用途：

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

したい場合は、Eメールだけ私の実際の電子メールとの間のギャップを取り除きます。

ので使用：

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

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

Demo