CSS Forum

**Hatsuharu** · 09-02-2006, 11:03 PM

Hello

I have a layout, (header, body, footer). Between the header and the top of the page there is a little space and the same happens for the footer. How can i delete the space between those images? I set "margin: 0px;" but doesn't work. Why?

Adieu, merci.

**persist1** · 09-03-2006, 01:37 AM

Your question would be much easier to answer if we could see a style example, but...

All browsers set a default margin (or in the case of Opera, padding) on the body of the document. In order to resolve your issue, you'll want to set those values to zero.

That would be my first guess at a solution.

**Hatsuharu** · 09-03-2006, 08:49 AM

Quote:

Originally Posted by persist1

Your question would be much easier to answer if we could see a style example, but...

All browsers set a default margin (or in the case of Opera, padding) on the body of the document. In order to resolve your issue, you'll want to set those values to zero.

That would be my first guess at a solution.

Hi ^^

Here is my css code. I was trying setting with padding-left: 0px; and padding-top: 0px; at the #container, but didn't work. I thought that margin: 0px; was enough to remove the default margin. Thanks.

Code:

#container{
background-color: #fff;
color: #fff;
font-family: verdana;
font-size: 10px;
margin: 0px;
background: #000 url(body.jpg) repeat-y;
}

.top /*726x324*/{
width: 726px;
height: 324px;
margin: 0px; 
float: center;
background-image:url('top.jpg');
background-repeat: no-repaet;
}

.fbody /*726x121*/{
width: 726px;
height: 121px;
margin: 0px;
float: center;
background: url('body.jpg');
}

.footer /*726*86*/{
width: 726px;
height: 86px;
margin: 0px;
float: center;
background-image: url('footer.jpg');
background-repeat: no-repeat;
}

**LadynRed** · 11:21 AM

You want the following:

body{
margin: 0;
padding: 0;
}
That will zero out all the spaces.

Oh.. and there is no 'float: center' - it's either float: left or float: right; . If you want to center the layout, put a width on your container, and use margin: 0 auto;. In your body (for IE), add text-align: center; , then you'll have to use text-align: left in the container to put all your text back on the left where it belongs inside the container.

**Hatsuharu** · 09-03-2006, 02:20 PM

Quote:

Originally Posted by LadynRed

You want the following:

body{
margin: 0;
padding: 0;
}
That will zero out all the spaces.

You were right, thanks. One thing, if margin:0; is inside body{...}, is not necessary to have it on the others class right?

Quote:

Originally Posted by LadynRed

Oh.. and there is no 'float: center'..

Holy cow x_x, i didn't know that, now i know why wasn't working, thanks for the tips, now my layout is set to center ^^.

Merci Beaucoup, Adieu.

**LadynRed** · 09-03-2006, 04:12 PM

Quote:

One thing, if margin:0; is inside body{...}, is not necessary to have it on the others class right?

No. Zeroing out the margins on the body itself just zeros out the defaults for <body>. On any other elements you'll have to do the same zeroing out initially. You could just do something like this:

body, ul, h1, h2, hx... , p, a{
margin: 0;
padding: 0;
}
That zeros out all those elements to start with, then you set margins and padding by id or class where you want them.

**Hatsuharu** · 09-04-2006, 11:20 PM

Quote:

Originally Posted by LadynRed

No. Zeroing out the margins on the body itself just zeros out the defaults for <body>. On any other elements you'll have to do the same zeroing out initially. You could just do something like this:

body, ul, h1, h2, hx... , p, a{
margin: 0;
padding: 0;
}
That zeros out all those elements to start with, then you set margins and padding by id or class where you want them.

Ok. I got it. Thank you so mucho for your help ^^
Merci Beaucoup