Question

On a test page I’m building I’m having this odd spacing appear at the top of the page and I am unsure of why this is.

As you can see from the CSS below, the body tag has the margin and padding set to 0.

Here’s the test site URL to see what I mean by the spacing: http://s361608839.websitehome.co.uk/testsite/index.html

CSS:

body{
background: #4f6ca6;
margin: 0;
padding: 0;
}

#header{
background:url(../images/header_bg.jpg) no-repeat center top;
height: 328px;
width: 100%;
border-bottom: 1px solid #223c6d;
-webkit-box-shadow: 0 8px 6px -6px #254379;
-moz-box-shadow: 0 8px 6px -6px #254379;
box-shadow: 0 8px 6px -6px #254379;       
}

#slider{
width: 960px;
height: 328px;
margin: 0 auto;
}

HTML:

 <div id="header">
 <div id="slider">
 <h1>Test Site</h1>
 <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
 </div>
 </div>

Answer 1

Your <h1> tag has 30px of margin.

This is called an inspector:

Learn it, love it, then abuse it.