HTML elements with "built-in" margins
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 test开发者_开发问答ing 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.
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;
}
You may want to check out YUI's reset.css
http://developer.yahoo.com/yui/reset/
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
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.
精彩评论