CODEWITHSUNDEEP
htmlcss
Thomas Hutton
Thomas Hutton

Reputation: 803

Inconsistent Line Text

I'm doing a test website and I'm on my contact page and I'm having a slight issue. My line height is inconsistent, and is making some of my website look ugly.

.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>[email protected]</p>
  <p>[email protected]</p>
  <p>[email protected]</p>
</div>

And here's a picture of what I mean:

Upvotes: 1

Views: 48

Answers (1)

Sebastian
Sebastian

Reputation: 1001

It's because you wrap the email addresses in an own p tag.

You could add 

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

to your CSS file.

Upvotes: 3

Related Questions