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 trialgary peart
6,496 PointsHow 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
37,045 PointsThere 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>© 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!
Rich Turnbull
9,212 PointsIt 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
37,045 PointsI 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
Front End Web Development Techdegree Graduate 34,909 PointsThis 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
6,496 PointsHi 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! ;)
Juan Andrade
8,219 PointsJuan Andrade
8,219 PointsPerfect thanks it works for me.