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

HTML How to Make a Website Adding Pages to a Website Make an About Page

Posted by Burton King
Burton King
3,938 Points

code review setting margin-bottom 30px

I'm in code review and need to set the margin-bottom for an image to 30px. How can I do so?

about.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
          <img src="img/gratt.png" alt="Image of Burt Pettit" class="profile-photo" align="center" margin-bottom:30px>
          <p>Here is some paragraph information about me.</p>

      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Nick Pettit.</p>
      </footer>
    </div>
  </body>
</html>
css/main.css 
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: ‘Changa One’, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
  display:block;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

1 Answer

francesmassie
francesmassie
10,204 Points
francesmassie
francesmassie
10,204 Points

Hi Burton,

In your 'about.html' code, you have 

<img src="img/gratt.png" alt="Image of Burt Pettit" class="profile-photo" align="center" margin-bottom:30px>

This 'margin-bottom:30px' should actually be in your 'main.css' file.

So just as you have styled other html elements, in your CSS file you want to use a selector to apply the 'margin-bottom:30px' to the image.

You can do this two ways. You can either do:

img {
 margin-bottom: 30px;
}

By using a rather unspecific selector of just 'img', this will apply the 'margin-bottom: 30px' to every image on your site, if you were to add more.

Instead you could select the 'class' of your image. In this case it's 'profile-photo'. It would look like this:

.profile-photo {
 margin-bottom: 30px;
}

This is more specific and would only apply that styling to that particular image, or to any images with that particular class.

I hope this helped!