浮动和文本对齐的异常间隙

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;
}

如果你愿意，请消除电子邮件和我的实际电子邮件之间的差距。

所以使用：

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

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

Demo