Good explanation, Bill. And I find ASCII very useful for this purpose. iñ
2008/11/18 Bill Brown <[EMAIL PROTECTED]> > Mark Wheeler wrote: > > Yep! That did the trick. I've run into this before, but it was a > > while back. What is it about adding the padding that does the trick? > > Mark > > Hi Mark. > > Glad it helped. > > Basically, I think when you have an element with no border or padding, > the margin looks like this: > > m m m m <-- top margin > sometext > m m m m <-- bottom margin > > ...which means that when it's followed by another element, it looks like > this: > > m m m m <-- top margin > sometext > m m m m <-- bottom margin > m m m m <-- top margin > sometext > m m m m <-- bottom margin > > ...and the margins collapse like this: > > m m m m <-- top margin > sometext > mmmmmmmm <-- top and bottom margin > sometext > m m m m <-- bottom margin > > ...like a kind of zippering effect. When you add a border or padding, it > changes the nature of the imaginary box holding the content inside an > element so that the margin now looks like this: > > m m m m > sometext > pppppppp <-- some bottom padding will create the solid margin > mmmmmmmm <-- allowing this margin to exist on its own... > m m m m <-- ...separated from this margin here > sometext > m m m m > mmmmmmmm <-- the border on this element will do it too > bbbbbbbb > sometext > m m m m > > I know the ASCII might not be the best way to demonstrate this, but > hopefully, it gives you at least some idea of what's going on there with > the box model. > > Anyway, I'm glad you were able to get it working. > --Bill > > > -- > <!-- > ! Bill Brown - <[EMAIL PROTECTED]> - 484-809-8077 > ! WebDevelopedia.com, TheHolierGrail, MacNimble.com > ! 24 Countryside Drive, Johnston, RI 02919 > --> > ______________________________________________________________________ > css-discuss [EMAIL PROTECTED] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > -- Iñigo Medina García Tecnología http://www.toprural.com Tu guía de turismo rural ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
