4

Clear CSS Defaults

Posted July 29th, 2007 in Archive and tagged by Darfuria

Another really, really useful bit of code that I have been using is in CSS. CSS have default values, and often programmers will list all of the page elements to clear these values right at the beginning of the stylesheet, like so:

html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, li, dd, dt, img,
blockquote, q, table, thead, tbody, tfoot, caption, th, tr, td,
a, form, input, textarea,  pre {margin: 0; padding: 0;}

However, by using * as a wildcard, like you can in many languages, you can do all of that with a much smaller block of code:

* {margin: 0; padding: 0;}

As of yet I haven’t found any browser issues with this.

4 Responses so far.

  1. Flipflops says:

    Hey which plugin are you using for your code ?

  2. Darfuria says:

    The same one you are, I think.

    wp_syntax

  3. Craig says:

    I’ve found that using the wildcard can sometimes cause paragraphs to butt right up against each other, because you’ve effectively given it a margin-bottom of 0.

    I can’t remember what browser it was in, but it’s happened to me a couple of times leading to me not bothering to use it anymore, and just declaring padding and margin 0 when I actually need it.

  4. Darfuria says:

    Well, yes, because the CSS attributes you’re defining in the wildcard apply to all of the HTML elements, so removing the padding/margins from paragraphs would be intended.

    I generally apply some style to my paragraphs anyway. I find it’s easier to start from the beginning than break things down as you go. Plus you know that any conflict with divs or anything would be due to your programming, not because of defaults.

Leave a Reply