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>

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

以下是整个（相关）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

与浮动和文本对齐的不寻常的间隙

1 个答案: