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 Alexander Mooney
Alexander Mooney
7,321 Points

White space removal reliant upon #gallery rule. Why doesn't it work otherwise?

So I've been experimenting with building my own site, basing it off of the code I've used from the videos, and I noticed something peculiar. I've searched all over and thoroughly tested different possible solutions but still haven't found one.

In the video we remove the white space by selecting the header and giving it some properties. However, if you remove the #gallery rule, the white space above the header comes back. I can't wrap my head around why this is happening, as the two don't seem to be related in any way.

Here is the HTML and CSS I used:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Alexander Mooney | Web Developer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>

  <body>
    <header>
      <a href ="index.html" id="logo">
        <h1>Alexander Mooney</h1>
        <h2>Web Developer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
               <img src="img/numbers-01.jpg" alt="">
               <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
               <img src="img/numbers-02.jpg" alt="">
               <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
               <img src="img/numbers-06.jpg" alt="">
               <p>Trying to create an 80's style of glows.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
               <img src="img/numbers-09.jpg" alt="">
               <p>Drips created using Photoshop brushes.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
               <img src="img/numbers-12.jpg" alt="">
               <p>Creating shapes using repetition.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com">
          <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">
        </a>
        <a href="http://facebook.com">
          <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
        </a>
        <p>&copy; 2015 Alexander Mooney.</p>
      </footer>
    </div>
  </body>

</html>

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

body {
  font-family: 'Open Sans', sans-serif;
}

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

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}



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

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

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

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}



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

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

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

nav li {
  display: inline-block;
}

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



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

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}



/****************************************
PAGE PORTFOLIO
****************************************/

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

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

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}



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

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* nav background on mobile devices */
nav {
  background: #599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link color */
nav a.selected, nav a:hover {
  color: #32673f;
}

4 Answers

Kevin Korte
Kevin Korte
28,149 Points

Okay, a couple of things to be aware of.

The short answer is Braden is correct. Let me explain.

Normalize.css does not do anything with unordered lists. It's a short file, and if you just search the document for ul you'll see there is nothing in it that sets unorder list elements, so....Normalize or not, it won't matter, which means that white space is appearing due to user agent stylesheets, which you can see in your Chrome inspector.

Why?

Because #gallery contains only floated children, it collapses on itself. This is a common "bug" in CSS, which is why the well known Clearfix Hack has been around for quite some time. This is where your problem lies.

When you have your #gallery set to margin: 0 it's collapased at the top, but it doesn't take up any space on the screen, as you can see here.

screen-1

However, when you remove the #gallery rule, the agent sytlesheet kicks in, and in my browser, adds 1em of margin top and bottom to list items, or 16 pixels, so, because the unordered list gallery only contains floated children, and is collapsed at the top of the screen, you get 16pxs of whitespace at the top when you had 0, all because the margin is changing from you setting it to 0, to the browser on my end setting it to 16px, as seen here

screen-2

Another fun thing, as you might be asking yourself is why is the bottom 16px of margin being collapased, why is it only 16px of margin instead of 32 px, since its 16px top and bottom.

That's because of margin collapsing, which you can read here:

I added the clearfix hack to this codepen, notice now how the the gallery ui wraps around it's children, and the margins act a bit more how you would expect them to.

http://codepen.io/kevink/pen/JdqJrM

Braden Boaglio
Braden Boaglio
9,375 Points
Braden Boaglio
Braden Boaglio
9,375 Points

Perhaps the browser has built in default margin or padding settings that get triggered when there isn't a rule telling it to act otherwise? Just a thought...

Alexander Mooney
Alexander Mooney
7,321 Points
Alexander Mooney
Alexander Mooney
7,321 Points

I'm using Google Chrome, and have linked the normalize.css stylesheet to the document. So wouldn't that override any default margin or padding settings? I've even experimented with using:

* {
  margin: 0;
  padding: 0;
}

in the main.css file. It doesn't matter what I do, it relies upon the existence of the the gallery id to remove the whitespace.

Edit: I would like to add that this is still a problem even if there is no code in the "section" element in the HTML document. The header will continue to have a white space above it without the existence of an unordered list full of images.

Alexander Mooney
Alexander Mooney
7,321 Points
Alexander Mooney
Alexander Mooney
7,321 Points

Wow! Thank you Kevin for taking the time to give such a detailed response! That explains everything perfectly. I understand now.

Kevin Korte
Kevin Korte
28,149 Points

No worries, you hit two super common issues with CSS layouts, which is collapsing parents, and collapsing margins, so it was a good opportunity to get you pointed in the right direction. Happy coding!