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

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>

由于我无法上传任何照片，这可能很难解释。单词 "email" 和我的实际电子邮件之间存在垂直间隙（如公司名称的高度）。

这是完整的（相关的）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

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

Unusual gapping with floats and text-aligns

html

css

space

alignment

break