Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

mrx3
mrx3
8,742 Points

How could I remove the white space between my main-content and my footer.

I've tried to figure this out for the past couple of hours. I tried to remove the margins from various parts of my CSS but, to no avail. My HTML code is below, as well as my CSS.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Steve Mitchell | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <!-- goggle web-fonts go here -->
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1>Steve Mitchell | Designer</h1>
        <nav>
          <ul>
            <li><a href="index.html">Portfolio</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>
      </header>
      <div class="main-content">
        <p>
          Maximas vero virtutes iacere omnis necesse est voluptate dominante. Aliter enim nosmet ipsos nosse non possumus. Quae cum dixisset, finem ille. Quis animo aequo videt eum, quem inpure ac flagitiose putet vivere? Ut non sine causa ex iis memoriae ducta sit disciplina. Expectoque quid ad id, quod quaerebam, respondeas. Color egregius, integra valitudo, summa gratia, vita denique conferta voluptatum omnium varietate. Sed utrum hortandus es nobis, Luci, inquit, an etiam tua sponte propensus es? 
        </p>
        <p>
          Illis videtur, qui illud non dubitant bonum dicere -; Neque solum ea communia, verum etiam paria esse dixerunt. Quodsi vultum tibi, si incessum fingeres, quo gravior viderere, non esses tui similis; Igitur neque stultorum quisquam beatus neque sapientium non beatus. Quis animo aequo videt eum, quem inpure ac flagitiose putet vivere? Non enim iam stirpis bonum quaeret, sed animalis. 
        </p>
        <p>
          Que Manilium, ab iisque M. Quid iudicant sensus? Ita relinquet duas, de quibus etiam atque etiam consideret. Cum autem in quo sapienter dicimus, id a primo rectissime dicitur. Negat enim summo bono afferre incrementum diem. Sed ille, ut dixi, vitiose. Quae si potest singula consolando levare, universa quo modo sustinebit? Sed quid ages tandem, si utilitas ab amicitia, ut fit saepe, defecerit? Quamvis enim depravatae non sint, pravae tamen esse possunt. Duarum enim vitarum nobis erunt instituta capienda. Et ille ridens: Video, inquit, quid agas; 
        </p>
      </div>
      <footer>
        <p>&copy; Steve Mitchell 2014.</p>
        <p>I'm Social:</p>
        <a href="http://twitter.com" target="_blank"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com" target="-blank"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
      </footer>
    </div>
  </body>
</html>

My css below:

/* This code is for box sizing across all browsers */

*, *:before, *:after {  
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

/* The .wrapper is for making the page centred */

.wrapper {
  max-width: 960px;
  margin: 0 auto;
}

/* styling the header with background and text align. */

header {
  background: #008080;
  border: 2px solid black;
  text-align: center;
}

/* styling the nav bar. */

nav {
  background: #20B2AA;
  font-size: 1.3em;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

nav li {
  display: inline;
}

nav ul {
  padding: 0;
  margin: 0;
}

nav a {
  display: inline-block;
  padding: 10px;
  text-decoration: none;
}

/* styling the main content section */

.main-content {
  background: #D3D3D3;
  border: 2px solid black;
  border-top: 0;
}

.main-content p {
  line-height: 2em;
  padding: 10px;
  margin: 0;
}
/* Footer styling below */

footer {
  background: #008080;
  border: 2px solid black;
  border-top: 0;
}

Thank you in advance for any answers.

mrx3
mrx3
8,742 Points

Oops. I figured it out. I added:

 p {
    margin: 0;
 }

After I added the above the white-space between my content and footer was eliminated. If anyone has any better way of fixing it I'm still open to suggestions. Thanks for the help.

1 Answer

Jimmy Hsu
Jimmy Hsu
6,511 Points

There's a multitude of ways to go about fixing this, but I would recommend against what I'd call "global" styling for this situation as there may be places where you would want the p tag to have margins.

Here's a list of different ways, all work by adding the attirbutes to the footer tag:

margin-top: -16px;

  • if you wish to remove the gap without filling it in, functions due to the nature of negative margins.

overflow: auto;

  • fills in the gap with the footer element's styling, functions by preventing the footer element from collapsing.

footer p:first-child { margin-top: 0; }

  • does the same as the first one, but a more verbose and possibly more cross-browser compatibility as it addresses the issue directly by removing the offending margin.

These are just some of the examples of what you can do to fix the issue, in general it's best to target the issue directly and specifically.

mrx3
mrx3
8,742 Points

Thanks Jimmy for the comment, much appreciated. I seem to have trouble with the whitespace. I like to try to make a website a little different each time, so I get some new challenges. Thanks again for your help.

Jimmy Hsu
Jimmy Hsu
6,511 Points

No problem, it's good to try new techniques as there's always something to learn from that.

I just wanted to add another note about being specific with the css selectors; try not to use more than 4-5 css selectors to reach your target (ex. `nav p .stuff .more-stuff #stuff { color: #000; }). It could be an indication of a larger nesting issue with your markup/html as that and excessive selectors can reduce browser performance during rendering, which is even more apparent with mobile.