Zero Out Your Margins

2008 March 06
Published in Development
Comments

Previous PostWebsite Promotion Schedule for 2008 Next PostHome Sweet Home

Recent Tweets: @CharterJosh black; September 03; @CharterJosh Wireless is working. There's a big long wire going through my yard. Not sure what's happening with that, but it is working.; September 03; Xenu Link Sleuth saves the day. Best program to find all broken links. #lifesaver; September 01

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.

Join the conversation 4 Comments

ericMarch 06, 2008

wow that was great man.

toddApril 02, 2008

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!

eliApril 02, 2008

Does listing every tag have a different effect than just including the catch-all:
*{ margin:0; padding:0; }

Drew StaufferApril 02, 2008

@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.
——-

Commenting is not available in this section entry.

Zero Out Your Margins

Join the conversation 4 Comments

Look in the archives

Elsewhere

About

Recent Projects

Search

Accolades