Grow your CSS skills. Land your dream job.

* { margin: 0; padding: 0; } No Longer Cool

Published by Chris Coyier

One the techniques I have advocated using for a long time is this:

* {
  margin: 0;
  padding: 0;
}

This is part of the "CSS Reset" theory which helps keep your designs consistent across browsers, a very good thing. This technique works on all browsers, so I never really considered any negatives. That is, until I read this post by Christian Montoya who points out:

This eliminated all differences in padding and margin across browsers so I was free to go about styling my page. Unfortunately, this isn’t a good practice. It’s very heavy on the rendering agent to apply rules to every single element in the document, especially with large web pages, and this can also destroy a lot of good default styling, especially when you want to have default styled submit buttons.

I think he makes some good points there. He may be right about the rendering engine thing, although I've never really had any serious problem with load times and I've used this technique on tons of pages. I think keeping image sizes optimized is the big one there. But the default submit buttons is certainly a concern. In fact, if you are using Firefox or Opera to view this site, you will notice that the "Say it!" button that you need to press to submit a comment has been stripped of it's nice default style and now just looks like normal text with a border around it. Not very ideal. If you are using Safari, it uses the default Safari-style button, which is nice.

I guess I'm still up in the air whether I will continue to use this or not. I think I probably will if I can figure out a nicer way to handle inputs/textareas.

Comments

  1. Permalink to comment#

    You should check out Eric Meyer’s CSS Reset. This deals with the issues that come with just using the star selector, as well as some other issues.

  2. @Daryn: Thanks for the link! Yeah, I’ve seen that before but it never really sunk in before the value. That big chunk of CSS actually reduces the render load on pages and keeps things more cross browser consistent without breaking good default settings.

  3. Permalink to comment#

    I use a main container div to wrap all my content and then add a maincontainer * {padding:0;margin:0;}. I think it ends up the same as the above code.

  4. @shane: That is an interesting technique as well. If you could keep things like submit buttons out of that maincontainer, that might be a solution.

    I think I’m leaning toward using something more like Eric Meyer’s solution only incorporating it into it’s own separate stylesheet that I would link to separately like:

    <link rel=”stylesheet” href=”reset.css” type=”text/css” media=”screen” />

  5. I actually find using *html, body {margin 0; padding: 0;} the best along with defying the font size etc. For me I have not had any trouble with using this and you can add margin/ padding to buttons if needed…

  6. Thanks for the link in the first comment, I’ve found it really useful!

  7. Permalink to comment#

    try reseting the elements in your page or could use yahoo’s reset CSS

    body,div,p…{margin:0;padding:0}

    cheers

  8. Palash Bhattacharya

    Reset making ul, ol{ padding:0, margin:0, list-style-type:none;} p{ padding:0, margin:0}
    but
    I need these property’s default value for CMS page as without browser reset. Thanks

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".