Hi Rich -
I think i get the gist of the collapsing margins discussion, but some of the explanation is unclear. In my brief experience trying to float, this has been one of my bugaboos, so I thought I'd try to get clarity on it. Maybe its just terminology.

Or maybe Figures 11-1 thru 11-4 could use some lines and shading drawn in them to define PBM.

1. In figure 11-1, the margin collapses "between the top border of the top paragraph and the bottom border of the browser window" I think "browser window" is the big white area where the content goes, right? Isn't the margin in question collapsing between the top of the paragraph and the top border of the browser window?
2. Later on p310, it states that "only 20 pixels separate the text of the first paragraph from the bottom border of the browser window". Since there is a whole second paragraph sitting under the first one, which takes up much more than 20px, so my bottom of browser window and yours are not the same.
3. Suggestion on p311. It states that "the top margin of the <p> element has collapsed with the top margin of the <div> element. I think of that as a "collision" or "overlap" rather than a collapse at that point. To me, a collapse is the result of a collision. Am I thinking about this right? You use the word "contact" later. That might be even better.
4. The solution on the bottom of p311 is to use border or padding to prevent margins from contacting one another. But please clarify, the use of border or padding in and of itself does not prevent margin collapse, it's just a way to retain the format and set margins to zero, so there is nothing to collapse.
5. On p312, I have drawn all over figure 11-4, but still can't get my mind around that last paragraph, which to me is one really long and complicated sentence. It starts by stating that padding is being applied to the <div>, but that padding was there in the previous example. What's new is that we are taking the browser default on the <p> margin. If figure 11-4 showed the overlapping margins in different shades of gray, it would help.

"the default margin of the <p> appears between the bottom outside edge of the <div> element's padding and the top outside edge of the <p> element" I need a picture, with labels.

Maybe if it were broken out, with the top and bottom collapses discussed separately, I might get it with just words. At a slightly higher level, I think I understand the point that "default margin values are prone to collapse when they meet either of the two specified critereon for margin collapse"

Again, forgive the ramble, It usually helps me sort it out, but in this case, the specifics of the bot of p312 are still quite foggy.

Mike Roberts
Software Carpenters, Inc
www.softwarecarpenters.com

Yes, that's it. This is an error in the text, which I've just reported to my editor, so it should show up in the errata.

Yes, it's much clearer to say "top border of browser viewport".

No, it's still collapsing, although it seems froggy that's what the actual specifications call it. Margin collapsing only happens when top or bottom margins of adjacent or nested (As in parent /child) come into contact with one another, the larger margin of the two always wins. Is that clearer?

True, there are no margins to collapse if you are using padding or borders instead. The better wording would have been to say "to work-around margin-collapsing, do the following".
That's a good idea. I didn't have much time to create compelling visual aids to better illustrate the concepts, and of course CSS doesn't provide a way to change the background color for only the margin area. I'll keep this in mind if/when I start the 2nd edition.

It's difficult to get your head around, I realize, and I can see the point you're making for better visual aids.

Do you understand the concept though?

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design