how to remove the space in the top e in the bottom of a page?

Question

I have this classic container:

.container { width: 910px;
             margin-left: auto;
             margin-right: auto;
             position: relative; 
             background-image:url(../images/background.png);
             background-repeat:repeat-y; }

but it creates a small space (like 5, 10 px) in the top and in the bottom of the page.

Why? And how can I fix it?

@gutierrezalex: A "classic container" is invariably a `div`. — thirtydot, May 14 '11 at 13:28

score 4 · Accepted Answer · answered May 14 '11 at 13:07

4

You need to zero the page's margin and padding, like this:

html, body {
    margin: 0;
    padding: 0
}

Some people like to use a CSS Reset to handle problems like this.

Personally, I don't for reasons summed up here: http://snook.ca/archives/html_and_css/no_css_reset/.

answered May 14 '11 at 13:07

thirtydot

224,678
48
389
349

2 question : is it better put 0px or 0? and why last definition is without ; ? – kwichz May 14 '11 at 13:30
When it's `0px` (or `0em` or `0whatever`), you can leave out the `px` part (see: http://www.w3.org/TR/css3-values/#numbers0). I think it's better to leave out the `px` because it's marginally shorter and more readable. The last definition is without `;` because you can omit the last `;` if you like, see: http://stackoverflow.com/questions/5732486/inline-css-formatting-best-practices-two-questions/5732519#5732519 – thirtydot May 14 '11 at 13:41

score 0 · Answer 2 · answered May 14 '11 at 13:07

0

Add this:

.container
{
    margin: 0 auto 0 auto;
}

You may also need to adjust the margin and padding of the "thing" that .container is within.

answered May 14 '11 at 13:07

Josh M.

26,437
24
119
200

? What do you mean with the last phrase? :) – kwichz May 14 '11 at 13:30

how to remove the space in the top e in the bottom of a page?

2 Answers2