Unwanted Extra Space

Get Started
1

Hey all, first post here and trying to figure out something that has been bugging me with some very basic design. I just started designing so be nice :slight_smile:

I did a bunch of research beforehand to try and figure out my problem, but with no resolution.

Here is my test page http://brianleo.me/tst/

1st…There is a gap between the div container and the top of the page, read that html, body {margin: 0; padding: 0;} was supposed to take care of this but that doesn’t seem to work.

2nd…Appears also that there is either padding or margin below both the header and footer, but none in the CSS.

Not sure what is going on, but any help would be awesome! Thanks.

2

Hi brianleo. Welcome to SitePoint. :slight_smile:

Browsers often put their own default margins and/or paddings on various elements, so it is a common design technique to eleminate these from the get-go with a simple CSS rule:

* {margin: 0; padding:0;}

The asterisk selects all elements. However, this can cause a few problems down the line, so it’s more common to start your CSS file with some kind of ‘reset’, like this:


html, body, div,
h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img,
form, fieldset, legend, label, textarea, 
span, em, strong, sub, sup, cite,
table, tbody, td, tfoot, th, thead, tr, tt,
dl, dt, dd, ol, ul, li {
    margin: 0;
    padding: 0;
}

img {
    border: 0;
    vertical-align: bottom;
}

Adding that to your CSS file will solve both problems, which are caused be the browser’s default margins on the <p> elements.

Hope that all makes sense!

3

Shameless self-promotion: I recently did a huge review of resets for Six Revisions:

The History of CSS Resets

:stuck_out_tongue:

4

Try the following code

html, body, div,
h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img,
form, fieldset, legend, label, textarea,
span, em, strong, sub, sup, cite,
table, tbody, td, tfoot, th, thead, tr, tt,
dl, dt, dd, ol, ul, li {
margin: 0px;
padding: 0px;
}

5

Thanks Ralph and John, looks like the CSS reset worked. The * gave me a bit of trouble, but the long version of your recommended code worked.

Thanks again for your assistance! I’ll definitely remember this for the future.

Brian