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

Jordan Hudson
Jordan Hudson
2,977 Points
Posted by Jordan Hudson
Jordan Hudson
2,977 Points

How do you center an image using margin? What is the difference between margin and padding?

Struggling to clearly decipher the difference between margin and padding and how best to use these properties. Unsure on why 'auto' centers/centres an element. A clear definition and example of both would be greatly appreciated!

Many thanks in advance.

J.

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="PP" class="profile-photo">
        <p>I am great.</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%;
}

#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;
}

.profile-photo {
  display: block;
  margin: 0 auto
}
Jordan Hudson
Jordan Hudson
2,977 Points
Jordan Hudson
Jordan Hudson
2,977 Points

Sorry - the code isn't very useful. Attached it by accident.

3 Answers

Oliver Sewell
Oliver Sewell
16,425 Points
Oliver Sewell
Oliver Sewell
16,425 Points

margin 0 auto , means that 0 margin space on the top and bottom of the element and auto means that the left and right side of the element have equal amounts of margin on the left and right side so the element is centred. i hope this helps :)

Gido ten Cate
Gido ten Cate
10,966 Points
Gido ten Cate
Gido ten Cate
10,966 Points

The difference between padding and margin is not that hard but it is easy to be confused. I think this will help you.

http://stackoverflow.com/questions/5958699/difference-between-margin-and-padding

"padding is the space between the content and the border, whereas margin is the space outside the border. Here's an image I found from a quick Google search, that illustrates this idea."

http://i.stack.imgur.com/D9nU6.gif

Gido ten Cate
Gido ten Cate
10,966 Points
Gido ten Cate
Gido ten Cate
10,966 Points

Correct me if i'm wrong but sometimes the auto will calculate the sides and will center the element but a lesson in positioning would be helpfull. Sites like CSS-Tricks and stackoverflow will help you a great deal with the questions that will arise in webdevelopment and other programmer related stuff.

These links will help you with your problem. I think our css teacher has also video about the subject. I think its in the beginning of the CSS track.

https://css-tricks.com/almanac/properties/p/position/ https://css-tricks.com/almanac/properties/d/display/ https://css-tricks.com/centering-css-complete-guide/

If there is still something that you can't figure out just let me know.