4 replies [Last post]
pingu
pingu's picture
Offline
Enthusiast
UK
Last seen: 6 years 3 weeks ago
UK
Timezone: GMT+1
Joined: 2006-07-24
Posts: 63
Points: 5

Hi, why is there not a 10px gap between the last item and the footer? http://www.reapfuels.co.uk

Also, if i add the rule:

#content {
padding-bottom: 1px;
}

the 10px margin suddenly appears???

thanks

Triumph (not verified)
Anonymous's picture
Guru

Google "collapsing margins".

Google "collapsing margins". It's normal behavior.

pingu
pingu's picture
Offline
Enthusiast
UK
Last seen: 6 years 3 weeks ago
UK
Timezone: GMT+1
Joined: 2006-07-24
Posts: 63
Points: 5

Thanks Triumph

But i dont have 2 margins next to each other???? the only margin set is for the property, with margin-bottom: 10px; do you not need to specify two margins to collapse into each other?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 1 week ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

But you do! A margin of 0

But you do!

A margin of 0 is a margin. You have several containers with margin-bottom of 0. The margin-bottom of the last .property is collapsing with the margin-bottom of its two parent containers, .center (bad name!) and #content and the margin-top of the following element #footer. The margin is then applied between the adjacent margin-bottom (#center) and margin-top (#footer).

Get the firebug plugin for firefox. Use the HTML inspector view. However over elements and it will show you the element's space, padding and margins.

pingu
pingu's picture
Offline
Enthusiast
UK
Last seen: 6 years 3 weeks ago
UK
Timezone: GMT+1
Joined: 2006-07-24
Posts: 63
Points: 5

ahhhhhhh

I see the light, thank you very much.