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

Ronny Rosabal
Ronny Rosabal
4,812 Points
Posted by Ronny Rosabal
Ronny Rosabal
4,812 Points

White space above header.

I cant find an answer for the white space above the header. I have set html and body margin and padding to 0 and still have a white space above header. Any help would be greatly appreciated.

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="stylesheets/normalize.css" type="text/css" rel="stylesheet"> <link href="stylesheets/global.css" type="text/css" rel="stylesheet"> <title></title> </head> <body> <div id="headWrapper"> <header> <h1>ronny<span>rosabal</span></h1> </header> </div> <div id="bodyWrapper"> <nav id="mainNav"> <ul> <li><a href="index.php">about</a></li> <li><a href="contact.php">contact</a></li> </ul> </nav> <section id="mainSection"></section> <footer> <details> <summary>Ā© <?php echo date("Y"); ?> ronnyrosabal.com</summary> </details> </footer> </div> <script src="javascripts/main.js"></script> </body> </html>

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

html{
  margin: 0;
  padding: 0;
}

body{
  margin:0;
  padding:0;
}

.clear{
  clear: both;
}



/**************************************
HEADER
***************************************/

#headWrapper{
  position: inherit;
  top: 0;
  left: 0;
  width: 100%;
  height: 5em;
  background-color: #383838;
  box-shadow: 0 2px 2px black;
}

header{
  max-width: 900px;
  margin: 0 auto;
  color: #fff;
}

header h1 span{
  color: #ff4900;
}



/**************************************
BODY
***************************************/

#bodyWrapper{
  max-width: 900px;
  margin: 0 auto;
}

#mainNav{
  max-width: 900px;
  margin: 100px auto 10px auto;
}



/**************************************
FOOTER
***************************************/
Ronny Rosabal
Ronny Rosabal
4,812 Points
Ronny Rosabal
Ronny Rosabal
4,812 Points

I should add that if I change the headWrapper position from inherit to fixed the white space disappears. I assume this happens because the position takes it out of the flow. I still cant find why there is a white space in the first place.

2 Answers

Kelly von Borstel
Kelly von Borstel
28,880 Points
Kelly von Borstel
Kelly von Borstel
28,880 Points

It looks like there is some top margin on your h1, so if you set that to 0 it should work.

h1 {
  margin: 0;
}
Kelly von Borstel
Kelly von Borstel
28,880 Points
Kelly von Borstel
Kelly von Borstel
28,880 Points

full header css:

/************************************** HEADER ***************************************/

#headWrapper {
  position: inherit; 
  top: 0; left: 0; 
  width: 100%; 
  height: 5em; 
  background-color: #383838; 
  box-shadow: 0 2px 2px black; }

header { 
  max-width: 900px; 
  margin: 0 auto; 
  color: #fff; 
}

h1 {
  margin: 0;
}

header h1 span { 
  color: #ff4900; 
}
Ronny Rosabal
Ronny Rosabal
4,812 Points
Ronny Rosabal
Ronny Rosabal
4,812 Points

Thank you very much Kelly. That worked. For some reason I thought that a margin would have a similar effect to padding and increase the size of the h1 and its container. Also is margin not effective when using a position like fixed and absolute?