And <!DOCTYPE HTML PUBLIC> (no gap, as it should be):
This is not a valid DOCTYPE. PUBLIC must be followed by both a public and system identifier (eg, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">). Without a valid DOCTYPE, your browser may take it upon itself to "correct" any irregularities in your markup (even if your markup is syntactically valid).
For example, in Firefox, your body's 0 px margin is not always inherited by other elements. Whereas, if you had used a valid DOCTYPE, your body's margin
will be inherited, resulting in all elements which don't specify their own margin to have a 0 px margin instead of the default margin, which is what's screwing up your spacing (in reality, it's not screwed up at all: it's exactly what you asked for, even though it's not what you meant). At least, that's what's happening in Firefox. Other browsers may correct your markup in different ways, resulting in your page appearing different in different in different browsers.
TL;DR: If you use <!DOCTYPE HTML> (or any other valid DOCTYPE), your browser will display exactly what your markup specifies. If this differs from what you wanted or expected, there is a bug in your markup.
If you use <!DOCTYPE HTML PUBLIC> (or any other invalid DOCTYPE), your browser will attempt to fix such bugs, resulting in your page looking correct even if it is not. However, this is
not valid and your page is likely to look different (and may even look worse than if the bug was not fixed at all) in different browsers.
