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 CSS: Cascading Style Sheets Center the Wrapper

gary peart
gary peart
6,496 Points
Posted by gary peart
gary peart
6,496 Points

How do I remove white space between header, section & footer?

I'm just trying to produce a basic example, but can't remove the white space between header, section and footer. I've been viewing this through Chrome and Edge.

Is there a standard way of fixing the code below? What am I doing wrong?

Below is my index.html file....

<!DOCTYPE html> <html> <meta charset="utf-08"> <head> <title>GP work in progress</title> <link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" href="main.css"> </head> <body> <header> <h1>MY FIRST WEBSITE</h1> <h2>GP</h2> </header> <section> <p>Hello!</p> </section> <footer> <p>© GP 2016</p> </footer> </body> </html>

Below is my main.css file......

body { margin: 0; padding: 0; }

header { background-color: red; margin: 0; padding: 0; } section { background-color: silver; margin: 0; padding: 0; width: 100% }

section p{ margin: 0; padding: 0; } footer { background-color: yellow; margin: 0; padding: 0; }

Any help will be greatly appreciated.

Gary

4 Answers

Kai Nightmode
Kai Nightmode
37,045 Points
Kai Nightmode
Kai Nightmode
37,045 Points

There are multiple solutions detailed at Mastering Margin Collapsing but here is a quick and easy one. Simply apply a little padding to the containers to contain any child element margins.

Here an updated version of the HTML.

<!doctype html>
<html>
<head>
    <title>GP work in progress</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="main.css">
</head>
<body>

    <header>
      <h1>MY FIRST WEBSITE</h1>
      <h2>GP</h2>
    </header>
    <section>
      <p>Hello!</p>
    </section>
    <footer>
      <p>&copy; GP 2016</p>
    </footer>

</body>
</html>

Here is the updated CSS with the proposed fix.

body {
    margin: 0;
    padding: 0;
}

header,
section,
footer {
    margin: 0;
    padding: 1px; /* tweaked from 0 to 1px */
}

header {
    background-color: red;
}

section {
    background-color: silver;
}

footer {
    background-color: yellow;
}

Try it out and let us know if you have any questions. ^_^

Cheers!

Juan Andrade
Juan Andrade
8,219 Points
Juan Andrade
Juan Andrade
8,219 Points

Perfect thanks it works for me.

Rich Turnbull
Rich Turnbull
9,212 Points
Rich Turnbull
Rich Turnbull
9,212 Points

It looks like the margin from h1, h2 and p are extending past the borders of header, footer and section. You have a number of options here:

1) Clear the margin from h1, h2 and p

header h1,
header h2,
section p,
footer p {
   margin: 0;
}

2) Apply an overflow setting to the containers header, footer and section

header,
footer, 
section {
   overflow: auto;
}

3) Add border or padding to the containers to stop the child element margin from exceeding the container's boundary 

header,
footer, 
section {
   padding: 1px;
}
Kai Nightmode
Kai Nightmode
37,045 Points

I think my favorite would be the overflow fix. Overflow has fixed soo many things for me over the years. ^_^

Thanks for listing all these options.

Chris Thomas
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 Points
Chris Thomas
.a{fill-rule:evenodd;}techdegree seal-36
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 Points

This would probably be more in the CSS section but anywho...

The problem is not with the sections themselves but actually with the heading and paragraph tags. The margins of them are extending beyond the height of the sections. Normalize.css sets the properties to be more consistent among browsers but a margin still applies.

Try applying a 'reset' consisting of 

h1,
h2,
p {
  margin: 0;
  padding: 0; /* Although I'm fairly certain it's only the margin causing the problem. */
}
gary peart
gary peart
6,496 Points
gary peart
gary peart
6,496 Points

Hi guys,

A big thank for your time and for resolving my problem. All solutions suggested have fixed the issue.

I'll have to read up on the CSS overflow setting.

Thanks again guys! ;)