Puzzling Margin-bottom problem

I am trying to set a margin-bottom:0px for my wordpress site but it won’t work.

I am not sure why after trying several method.

please take a look at my site and scroll down right to the bottom of the page.
you will see why i need to have it margin 0px.

my site is here

if you need the css link directly, its here css

please help. im pulling my hair already.

#page {
    background-color: #FFFFFF;
    margin: 0 auto;
    padding: 0 0 1px; /* added 1px padding-bottom */
    width: 960px;
}

You’ve also a few verification errors.

To explain what Victorinox did:

your #footer has 20px margin all the way around… so, including bottom.

But that bottom margin was collapsed to its parents, and became basically a bottom-margin on the #page element, which collapsed to a bottom-margin on the body element.

Adding 1px of padding (border works too) on #page stops margin collapse.

ah i was adding the margin-bottom to the body.

still don’t quite understand how adding 1px solve the problem
padding: 0 0 1px; /* added 1px padding-bottom */

thought it was suppose to be 0px so it doesn’t leave any gap at all?

btw, i made the changes and it worked.
thanks victorinox and storm for the help. appreciate it.

There’s a link in there which explains WHY 1px works.

^ good explanation, vic!

The padding fix is probably less intuitive than just setting the margin (or margin-bottom) of #footer to 0.

Let’s say, for example, you had 10px margin-bottom on #page (parent) and 20px margin-bottom on #footer (child). Rather than summing to 30px, the margins would collapse together, respecting the larger of the two values, thereby leaving a margin of 20px between the bottom of #page and body.

With 0px margin-bottom on #page, the 20px margin-bottom on #footer is still respected, but collapses into acting as 20px margin-bottom between #page and body.

The 1px padding-bottom (or border) fix applied to #page works acts a collapse-preventing barrier between the margins of #page and #footer.

In short,

  1. padding between elements having top/bottom margins prevents collapse.

  2. margin collapse can cause a child’s margins to be applied to the parent.

Also, even if both #page and #footer had 0 margin and padding, there would still be a small gap. This would be caused by the p element in #footer which, as the stylesheet declares no margin value either globally for p or specifically for #footer p, would apply the browser default margin for p.

ah never really gave a thought about that.

Thanks for your time on writing this explanations. now that is something new for me.

merry Christmas and happy new year to you guys. :smiley: