Heh! I really don't blame you for putting off wading through the technical spec - it's the kind of thing you only want to tackle if you really
really have to.
I've attached a JPG showing a diagram of how the margin-collapse property works, which might make it a bit clearer. The image is in three sections. The first section shows the margins set up in the CSS stylesheet for H1, H2 and P. The second section shows how these margins interact when these elements are next to each other in the HTML code, using the default setting for margin-collapse (which is to have adjoining vertical margins collapse together). The third section, simply for illustration, shows how the margins would interact if you were to set the margin-collapse property to "none" - the margins interact cumulatively rather than collapsing together. (However I haven't a clue if e-readers pay any attention to the margin-collapse property if it's set to "none" CSS stylesheet - this is simply illustrating how things would work if they did).
"I wonder why some sources have top & bottom both set to 1em then...?"
With "margin-collapse" functioning on its default setting, your top and bottom margin settings can be considered "minimum desired" values. So if you always want a blank line before or after a standard paragraph of text, you could set both margin-top and margin-bottom to 1em (or whatever value you are using for the default separation between paragraphs), knowing that it won't result in a double size space between paragraphs - the margin at the bottom of one paragraph will collapse into the margin at the top of the following paragraph, leaving just the desired single line of space between them.
Edit to add: At least, that's how it will work if the device or application interpreting the CSS is doing it properly!
(end of edit)
Hope that all made some sort of sense!
