Zero Out Your Margins

March 6, 2008 // Drew Stauffer

Have you ever designed a beautiful website only to find that it doesn’t quite look right across multiple browsers? All browsers are not created equal, and often they have slightly different standards for presenting web pages. Internet Explorer can put a little margin here or Firefox can put a little padding there, and even the smallest differences can make your life a nightmare if you’re not prepared.

Developing websites without using tables can give a designer an extraordinary amount of control when it comes to how you want to style your design. Unfortunately with all that control comes a greater responsibility to make sure that each element stays in place across every browser that a user might open.

Whenever I begin a new design I always start with this snippet of code at the top of my CSS file.

 ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,label,div,dd,dt,dl,table,tr,td { margin:0; padding:0; }

This piece of code will save you hours of troubleshooting when your designs don’t quite line up in every browser. By setting virtually everything in your style sheet to zero you take away any browser pre-set functions that might throw things off.

Accessible website development can make both you and your clients happy for a long time, and it pays to stay on top of web standards. Use this code in your next design and see how much easier website development can be.

Technorati Tags: website development, web standards, accessible website design

Bookmark It

Hide Sites

Don't forget to subscribe to the Alibi Productions feed!

Speak your mind

4 responses so far ↓

1 eric // Mar 6, 2008 at 5:50 am

wow that was great man.
2 todd // Apr 2, 2008 at 4:27 pm

I had this exact problem just days ago. I don’t know what the coder did to fix it, but I bet he would have been glad to know this!
3 eli // Apr 2, 2008 at 5:07 pm

Does listing every tag have a different effect than just including the catch-all:
*{ margin:0; padding:0; }
4 Drew Stauffer // Apr 2, 2008 at 5:42 pm

@todd
You would be surprised by how many problems this code prevents. Every time I work on a site that I didn’t build there always seems to be some mysterious margin or padding that I can’t figure out how it got there.

But then just like magic when I add this code in, most of the problems go away.

@eli
You might be able to get away with the “catch-all” approach but since every browser is a little different it might not work in all instances.

I put this code in so I never have think about it again. I always know that when ever something isn’t working it’s not because or a weird margin or padding.