Margin/Padding where there shouldn't be

Question

Web site: http://www.srstage.d19.us

* {
padding: 0;
margin: 0;
}

works, but that is for every element

I've worked out this hacky solution:

#header {
margin-bottom: -30px;
margin-top: -20px;
}

The problem is there is a space at the top and under the header image. However, all the relevant elements including body seem to have its margin & padding set to 0. I'm not sure exactly how to fix this.

Thanks for your help.

Answer 1

It's the default padding/margin of the surrounding h1#blog-title element. Force both values to 0, and it should work fine.

As a side note, for the future, Firebug's "Inspect element" and its layout view

are the perfect tool to find stuff like this.

Answer 2

#blog-title{
    margin: 0px;
}

or:

#header h1{
    margin: 0px;
}

Agree with Pekka, http://getfirebug.com/ is essential!

Answer 3

You have margin set for inside elements. They extend to their parents. Use padding when such cases occur. In your case, the h1 in the header has a margin. remove it and it's all set.