How to Use CSS to Zero Out Your Margins and Borders

This article explains how to use CSS to zero out margins and borders so that your web pages render consistently in every browser.

Normalizing Values for Margins and Padding

The best way to solve the problem of an inconsistent box model is to set all the margins and padding values of HTML elements to zero. There are a few ways that you could do this is to add this CSS rule to your stylesheet:

Even though this rule is unspecific, because it is in your external stylesheet, it will have a higher specificity than the default browser values do. Since those defaults are what you are overwriting, this one style will accomplish what you are setting out to do.

Once you turn all margins and padding off, you will need to selectively turn them back on for specific parts of your web page to achieve the look and feel that your design calls for.

Use CSS to Normalize Borders

Older versions of Internet Explorer had a transparent or invisible border around elements. Unless you set the border to 0, that border can mess up your page layouts. If you have decided that you will continue to support these antiquated versions of IE, you will need to address this by adding the following to your body and HTML styles:

HTML, body {
margin: 0px;
padding: 0px;
  border: 0px;
}

Similar to how you turned off the margins and padding, this new style will also turn off default borders. You could also do the same thing by using the wildcard selector shown earlier in the article.

Why Consistent Margins and Borders Matter in Web Design

Today's web browser has come a long way from the crazy days where any kind of cross-browser consistency was wishful thinking. Today's web browsers are fully standards-compliant. They play nicely together and deliver a fairly consistent page display across the various browsers. This includes the latest versions of Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari, and the various browsers found on ​the myriad mobile devices accessing websites today.

While progress has certainly been made with how browsers display CSS, there are still inconsistencies between these various software options. One of the common inconsistencies is how those browsers calculate margins, padding, and borders by default.

Because these aspects of the box model affect all HTML elements, and because they are essential in creating page layouts, an inconsistent display means that a page may look great in one browser, but look slightly off in another. To combat this problem, many web designers normalize these aspects of the box model. This practice is also known as zeroing out the values for margins, padding, and borders.

A Note on Browser Defaults

Web browsers each set default settings for certain display aspects of a page. For example, hyperlinks are blue and underlined by default. This behavior is consistent across various browsers, and although it is something that most designers change to suit the design needs of their specific project, the fact that they are all starting with the same defaults makes it easier to make these changes. Sadly, the default value for margins, padding, and borders do not enjoy the same level of cross-browser consistency.