线文本不一致

Question

我正在做一个测试网站，我在我的联系页面上，我有一个小问题。我的行高不一致，并且使我的某些网站看起来很难看。

.address {
  margin-left: 23%;
  float: left;
  margin-top: 2%;
  margin-bottom: 2%;
}

.phone {
  margin-left: 12%;
  float: left;
  margin-top: 2%;
  margin-bottom: 2%;
  line-height: 1.5;
}

.email {
  margin-left: 12%;
  float: left;
  margin-top: 2%;
  margin-bottom: 2%;
  line-height: 1.5;
}

<div class="address">
  <i class="fa fa-map-marker fa-4x icons" style="color: #1BA166; margin-left: 25%;" aria-hidden="true"></i> Lawyer Building 123 Fake Street Pluto, Mars, 60210 Galaxy
</div>
<div class="phone">
  <i class="fa fa-phone fa-4x icons" style="color: #1BA166; margin-left: 25%;" aria-hidden="true"></i>
  <p>1-555-555-5555</p>
</div>
<div class="email">
  <i class="fa fa-envelope fa-4x icons" style="color: #1BA166; margin-left: 25%;" aria-hidden="true"></i>
  <p>info@info.ca</p>
  <p>sales@info.ca</p>
  <p>careers@info.ca</p>
</div>

这是我的意思的图片：

Answer 1

这是因为您将电子邮件地址包装在自己的p标记中。

你可以添加

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

到你的CSS文件。