CODEWITHSUNDEEP
cssreset
user1087110
user1087110

Reputation: 3763

Reset CSS - Set padding and margin to 0?

Looking at YUI 2: Reset CSS they set margin:0 and padding:0 on multiple elements. I don't care about IE6 or IE7 on my pages. Will I still need to set margin:0 for each element anyway?

Will I still need to set padding:0 for each element anyway?

Will still I need to set border:0 for image?

A: Only for linked images

Anything else you recomend?

Upvotes: 0

Views: 8683

Answers (4)

user1166654
user1166654

Reputation: 53

I always use this one:

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;
}
body {
        line-height: 1;
}
ol, ul {
        list-style: none;
}
blockquote, q {
        quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: '';
        content: none;
}

/* remember to define focus styles! */
:focus {
        outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
        text-decoration: none;
}
del {
        text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: collapse;
        border-spacing: 0;
}

Upvotes: 0

lorenzo-s
lorenzo-s

Reputation: 17010

It's not something related to browser element compatibility. All standard elements are compatible (i.e. displayed for what they are) in every browser.

The problem is that usually browsers apply default styling properties for some elements in different ways. For example, IE and Firefox apply a different default margin for block elements, a different font size for headings (h1, h2, ...), etc...

CSS Reset style sheets help you to remove all these inconsistencies by flattening all styles that can be different in different browsers.

You can read an article here:

http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/

Upvotes: 0

Mathias Bynens
Mathias Bynens

Reputation: 149734

You can look up IE’s built-in style sheets on this website: http://www.iecss.com/

It has links to styles of Firefox, WebKit and Opera. You could cross-reference these to make a decision.

Upvotes: 3

Chris
Chris

Reputation: 981

It depends on whether you want the margin and padding on elements on your page to be a particular value. If it doesn't matter then by all means leave it as the browser default- just don't rely on it because there's no guarantee that all the browsers in the world will use the default that your testing browser does. I would recommend that you customise normalize.css and use it in your code. If you're bothered about having to load another stylesheet, or bloating your own stylesheet, you can always compress the CSS and paste it onto a line at the top of your file.

Upvotes: 0

Related Questions