Quote:
Originally Posted by DMSmillie
The "stack the blocks" concept works for the different sections of a "block" - margin, border, padding. However in CSS2, the default behaviour is for the vertical margins of "blocks" that adjoin each other (e.g. two paragraphs, one after the other) to "collapse" together, resulting in a shared margin which is equal in size to whichever individual margin is larger, rather than adding the two margins together.
So if the top paragraph has "margin-bottom:2em" and the bottom paragraph has "margin-top:1em", the result would be a 2em space between the paragraphs, not a 3em space.
(For a detailed description of this behaviour, in all its glory and with all the technicalese and minutiae and exceptions  see http://www.w3.org/TR/CSS21/box.html#collapsing-margins). |
OK thanks. I wonder why some sources have top & bottom both set to 1em then - maybe the authors did not know the above ?
so , from your explanation, e.g. top = 2 em bottom = 3em leads to a total margin of 3em, not 5em
- but is that positioned above the text or below ? ( i tried reading your link but it was too early in th morning to face off of that detail :-)