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

Posted by Trevor Brandt
Trevor Brandt
1,520 Points

Margin or padding? And how to calculate distance properly between elements.

Hi!

I am trying to design my personal website and I have some questions regarding margin and padding. I can't seem to figure out the two. I understand margin is used to separate the block and padding is to move contents away from the edge of the block. But in practice, I'm confused on how/which I should use and when.

Also, I am trying to correct the spacing between my elements. I've eyeballed it, but I want the same spacing scheme (height) to be used throughout. Is there a method to easily calculate this? I am using percentages, so I believe that is throwing me off a bit.

URL of my site: http://trvor.com/

And the code:

CSS:

/**************************************************
GENERAL
**************************************************/

body {

}

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

p {
    line-height: 180%;
    font-size: 1.1em;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

/**************************************************
HEADING
**************************************************/

header {
    width: 100%;
    padding-top: 2%;
    text-align: center;
    font-size: .9em
}

/**************************************************
NAVIGATION
**************************************************/

nav {
    width: 100%;
    margin: 3% 0;
    background-color: #395D73;
    padding: 1% 0;
}

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

nav li {
  display: inline-block;
}

nav a {
  font-size: 1.1em;
  padding: 15px 10px;
}

/**************************************************
PRIMARY
**************************************************/

section h1 {
    text-align: center;
    font-size: 2.5em;
}


/**************************************************
FOOTER
**************************************************/

footer {
    text-align: center;
    padding-top: .5%;
}

/**************************************************
COLORS
**************************************************/

body {
    color: #395D73;
    background-color: white;
}

a {
    color: #809DBC;
}

header a {
    color: white;
}

header {
    background-color: #7CC4D6;
}

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Trevor Brandt | Web Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
        <a href="index.html" id="logo">
            <h1>trvor.com</h1>
            <h2>Web Design Student</h2>
        </a>
        <nav>
            <ul>
              <li><a href="index.html">Portfolio</a></li>
              <li><a href="about.html">About</a></li>
              <li><a href="contact.html" class="selected">Contact</a></li>
            </ul>
        </nav>
    </header>
    <div id="wrapper">
        <section>
           <h1>Slogan. Goes. Here.</h1>
            <p>Fore eiusmod ad sunt tamen de se cernantur concursionibus. Amet doctrina e aute fore. Commodo
                illustriora a deserunt si ne fugiat amet malis incurreret ex ne quae fore minim ullamco ut ita irure
                comprehenderit. Nisi senserit in noster legam ita ingeniis hic quibusdam, ullamco an nulla voluptate
                ea ex dolore mentitum voluptatibus quo quis laborum ad efflorescere in expetendis voluptatibus sed
                eiusmod, mentitum tamen elit ea cillum, aut dolor multos legam officia. Varias ex occaecat, sint
                ullamco philosophari id laborum sunt amet singulis varias ut singulis id varias expetendis. Ita
                singulis hic ullamco, an duis anim o doctrina ubi ut nulla malis de deserunt do non sint eiusmod.
                Arbitror cohaerescant ea mentitum. Do elit fore e consequat qui et mentitum e deserunt.</p>
        </section>
    </div>
      <footer>
        <p>&copy; 2015 Trevor Brandt.</p>
      </footer>
  </body>
</html>

Thank you for your help! I appreciate it.

Julie Myers
Julie Myers
7,627 Points
Julie Myers
Julie Myers
7,627 Points

In general, use margin for page layout. For example, making more space between two div elements.

In general, use padding to give a good separation between your content and it's border. For example, you will want padding to separate the content in each table cell from it's border.

As for calculating percentages to make your page layout work keep the following in mind:

(1) Remember how the box model calculates width of an element: Calculating Element Width

width + padding + border = width

total width = (left padding + left border + content width + right border + right padding)

(2) Understand how the percent works: The % value is measured relative to a parent elements length/width; thus it will adjust based on the parent element. This is different from how px works. For example, A div with a width of 80% would use 80% of it's parent element, while a p element with it's font-size set to 80% would size the text at 80% of the size of it's parent text. In other words, % is always relative to something else.

There are two ways I use to calculate my webpage so everything fits.
(1) I keep in mind that the page should not be wider then 100%. So, if I make a div element 45% and another one next to it be 45% that leaves 10% for spacing in between them and things like margin and padding.

(2) If I am converting a webpage from pixel's to flexible/responsive layout, there are formulas you can use. But, I still need to keep in mind not to go over 100% total page width.

Hope this helps. There is a lot to know about page layout and a lot of practice too see how elements interact with each other when you use different combos of widths, margin, and padding.

3 Answers

Joel Shaw
Joel Shaw
1,731 Points
Joel Shaw
Joel Shaw
1,731 Points

Margin is the outside, Padding is the inside. If you visualize a box with a border of 1px with text on the inside, when you add a margin of 10px the box is going to gain 10px of white space on the OUTSIDE of the box. If you add 10px of padding to the box you're going to gain 10px between the INSIDE edge of the box and the text. Generally, Adding margin is a better practice. Even though you may not see it, you don't want your elements to become cluttered.

I've been doing this for almost 10 years, and I still find it difficult to eyeball it. You're best bet is to use the Web Inspector built-in to most modern web browsers. This will allow you to manipulate the DOM without actually changing the site. You can then use the properties that you find work the best in the code itself.

Hope this helps! Let me know if you have any questions. :)

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

Things can get a bit confusing when you mix padding and margins. One thing to consider is that margins can collapse, but padding does not. You can use the browsers developer tools to examine element layouts in detail.

Another little trick I sometimes use to help visualize what's happening is to temporarily put borders on everything:

* { border: 1px solid red; }
Trevor Brandt
Trevor Brandt
1,520 Points
Trevor Brandt
Trevor Brandt
1,520 Points

Thank you for the help! I really appreciate it! I have a much better understanding now. I'll try Chrome's inspector and see where I can get.

:) Thanks again.