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

Question

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.

Answer 1 · 2014-04-30T23:34:44Z

April 30, 2014 11:34pm

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.

Welcome to the Treehouse Community

Looking to learn something new?

mrx3

mrx3

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

mrx3

mrx3

1 Answer

Jimmy Hsu

Jimmy Hsu

mrx3

mrx3

Jimmy Hsu

Jimmy Hsu