HTML elements with "built-in" margins

Question

While working on my first project that completely uses css for layout rather than tables like I'm most used to and comfortable with I ran into a strange issue. Apparently there are some elements that have margins built in. In other words, if you set the "margin-top: 0px" then the element is rendered differently than if you don't. I didn't actually notice the problem until I was testing the site in IE7 which apparently doesn't respect this functionality.

So far I have noticed that the h* elements and the ul element have this. Does anyone know where I can find the other elements online that have this? I tried searching around W3C with very little luck. I'm sure it is out there somewhere since all the modern browsers implement this correctly. I just don't know where to find that information.

Answer 1

You may want to check out YUI's reset.css

http://developer.yahoo.com/yui/reset/

Answer 2

http://meyerweb.com/eric/tools/css/reset/

this is a rather famous css reset out there.

The main part of it:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

Answer 3

I use a combination of a reset.css (http://meyerweb.com/eric/tools/css/reset/) and ClearFix(http://www.webtoolkit.info/css-clearfix.html) for misbehaving divs that contain floating elements.

Answer 4

There may be small differences between browsers, but this, from the CSS 2.1 spec must be pretty close.

http://www.w3.org/TR/CSS21/sample.html