Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Personal Profile Page

Why is there a large line height between <p> tags?

Hi, I have added a class in the "qualifications" box so that I could style the links in there. Because of this, the line height has increased and I'm not sure how to fix it. How do I decrease the space between the qualification name (i.e. Diploma in Graphic Design) and the education facility (i.e. Media Design School)?

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Holly Logan's Profile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  </head>
  <body>

    <div class="main-nav">
        <ul class="nav">
          <li class="name">Holly Logan</li>
          <li><a href="#">Home</a></li>
        </ul>
    </div>

    <header>
      <img src="images/me.png" alt="Photo of Holly Logan" class="profile-image">
      <h1 class="tag name">Hello, I’m Holly</h1>
      <p class="tag location">I'm from New Zealand</p>
    </header>

    <main class="flex">
      <div class="card">
        <h2>Background</h2>
        <p>Hi, I'm Holly - a qualified graphic designer, a digital marketer, and an aspiring front-end web developer.</p>
        <p>I have many years experience in both business and marketing administration, and hope to one day be a sought-after web developer. I love the problem-solving aspect of development; it's sometimes frustrating but also invigorating when a problem is fixed!</p>
        <p>Personally, I am an outgoing and friendly person who makes a pretty good chocolate brownie!</p>
      </div> 

      <div class="card">
        <h2>Goals</h2>
        <p>To be a freelance web developer known for my technical skills and in demand for web work in the area that I live in. My goal is to learn:</p>
        <ul class="skills">
          <li>Web Design</li>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
          <li>Ruby</li>
        </ul>
        <p>I'd like to work from home to enable a healthy work-life balance, and to allow me more time with my children.</p>
      </div> 

      <div class="card">
        <h2>Qualifications</h2>
        <p>Diploma in Graphic Design</p>
        <p class="qualifications"><a href="http://www.mediadesignschool.com/">Media Design School</a>, Auckland, 2009</p>
        <p>Diploma in Communications</p>
        <p class="qualifications"><a href="https://www.waiariki.ac.nz/home">Waiariki Polytech</a>, Rotorua, 2014</p>
        <p>TechDegree in Front End Development</p>
        <p class="qualifications"><a href="https://teamtreehouse.com">Treehouse</a>, Online
        2016</p>
      </div>

      <div class="card">
        <h2>Experience</h2>
      <p>I have worked as a graphic designer for approximately 10 years and recently have moved into Wordpress management and development. For the past 2 years I have been employed as a digital marketer doing everything from SEO and social media management to metric reporting from Google Analytics and WooCommerce.</p>
      </div>

    </main>
    <footer>
      <ul>
        <li><a href="https://github.com/hollylogan" class="social github">Github</a></li>
      </ul>
      <p class="copyright">Copyright 2016, Holly Logan</p>
    </footer>
  </body>
  </html>
/* Global Layout Set-up */
* { 
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  color: #222;
  background: #f7f5f0;
}
/* Link Styles */

a {
  text-decoration: none;
  color: white;
}
a:hover {
  color: #6633ff;
}

.qualifications a {
  text-decoration: none;
  color: black;
 }

.qualifications a:hover {
  color: red;
}

/* Section Styles */

.main-nav {
  width: 100%;
  background: red;
  min-height: 30px;
  padding: 10px;
  position: fixed;
  text-align: center;
}
.nav {
  display: flex;
  justify-content: space-around;
  font-weight: 700;
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
}

.nav .name {
    display: block;
    margin-right: auto;
    color: black;
}
.nav li {
  padding: 5px 10px 10px 10px;
}
.nav a {
  transition: all .5s;
}
.nav a:hover {
  color: grey
}

header {
  text-align: center;
  background: url('images/new-zealand.png') no-repeat top center ;
  background-size: cover;
  overflow: hidden;
  padding-top: 60px;
}
header {
  line-height: 1.5;
}
header .profile-image {
  margin-top: 50px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1.5px solid #efefef;
  box-shadow: 2px 2px 1px #efefef;
  transition: all .5s;
}
header .profile-image:hover {
  transform: scale(1.2) rotate(5deg);
}
.tag {
  background-color: #efefef;
  color: black;
  padding: 10px;
  border-radius: 5px;
  display: table;
  margin: 10px auto;
} 
.location {
  background-color: #222;
  color: white;
}
.card {
  margin: 2rem auto;
  padding: 20px 40px 40px;
  max-width: 500px;
  text-align: left;
  background: #fff;
  border-bottom: 4px solid #ccc;
  border-radius: 6px;
  transition: all .5s;
}
.card:hover {
  border-color: red;
}

ul.skills {
  padding: 0;
  text-align: center;
}

.skills li {
  border-radius: 6px;
  display: inline-block;
  background: #ccc;
  color: white;
  padding: 5px 10px;
  margin: 2px;
}

.skills li:nth-child(odd) {
  background: red;
}

footer {
  width: 100%;
  min-height: 30px;
  padding: 20px 0 40px 20px;
}

footer .copyright {
  top: -8px;
  font-size: .75em;
}

footer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

footer ul li {
  display: inline-block;
}

a.social {
  display: inline-block;
  text-indent: -9999px;
  margin-left: 5px;
  width: 30px;
  height: 30px;
  background-size: 30px 30px;
  opacity: .4;
  transition: all .5s;
}
a.twitter {
  background-image: url(images/twitter.svg);
}
a.linkedin {
  background-image: url(images/linkedin.svg);
}
a.github {
  background-image: url(images/github.svg);
}
a.social:hover {
  opacity: 1;
}
.clearfix {
  clear: both;
}

/* Styles for larger screens */
@media screen and (min-width: 720px) {

  .flex {
      display: -ms-flexbox;      /* TWEENER - IE 10 */
      display: flex; 
      -ms-flex-pack: distribute;
      justify-content: space-around;
      flex-wrap: wrap;
  }

  flex-wrapper {
    max-width: 1200px;
    margin 0 auto;
  }

  .card:nth-child(1), .card:nth-child(2) {
    margin-bottom: 4rem;
  }

  .card {
    flex: 0 0 50%;
  }

  header {
    min-height: 470px;
  }

  .nav {
    max-width: 1200px;
    padding: 0 30px;
  }


  main {
    padding-top: 20px;
  }

  main p {
    line-height: 1.6em;
  }

  footer {
    font-size: 1.3em;
    max-width: 1200px;
    margin: 40px auto;
  }

}

Thank you

2 Answers

Hi Holly,

I stuck the code up on codepen and came up with the following:

      <div class="card">
        <h2>Qualifications</h2>
        <p class="qualification">Diploma in Graphic Design</p>
        <p class="education-facility"><a href="http://www.mediadesignschool.com/">Media Design School</a>, Auckland, 2009</p>
        <p class="qualification">Diploma in Communications</p>
        <p class="education-facility"><a href="https://www.waiariki.ac.nz/home">Waiariki Polytech</a>, Rotorua, 2014</p>
        <p class="qualification">TechDegree in Front End Development</p>
        <p class="education-facility"><a href="https://teamtreehouse.com">Treehouse</a>, Online
        2016</p>
      </div>
p.qualification,
p.education-facility {
    margin: 0;
}

p.education-facility {
    font-size: 0.9em;
    margin-bottom: 1rem;
}

p.education-facility a {
  text-decoration: none;
  color: black;
 }

p.education-facility a:hover {
  color: red;
}

Take a look at the Pen if you like, CSS changes are from lines 24 to 41, it was actually margin on the p elements that was causing the issue.

http://codepen.io/Craig-Watson/pen/pbrNNv?editors=1100

Hope this helps :) Craig

That helps greatly, thanks Craig. Weird margin thing, don't think I would have ever got that. And also didn't realise that I could use multiple classes - totally makes sense now. Thanks so much!