开发者

HTML elements with "built-in" margins

开发者 https://www.devze.com 2023-01-08 18:54 出处:网络
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

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号