Using CSS to Zero Out Your Margins, Padding, and Borders in Web Browsers

Normalizing CSS Margins, Padding, and Borders Can Help Make a Consistent Display

Browsers you should be testing with
Browsers you should be testing with. courtesy J Kyrnin

Today's web browser have come a long way from the crazy days where any kind of cross-browser consistency was wishful thinking. Today's web browsers are all very 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 of mobile devices being used to access website today.

While progress has certainly been made when it come to web browser and how they 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 effect 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 all have  default settings for certain display aspects of a page. For instance, hyperlinks are blue and underlined by default. This 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.

Normalizing Values for Margins and Padding

The best way to solve the problem of 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:

* {
  margin: 0;
  padding: 0;
}

This CSS rule uses the * or wildcard character. That character means "all elements" and it would basically select every HTML element and set the margins and padding to 0.  Even though this rule is very unspecific, because it is in your external stylesheet, it will have a higher specificity than the defualt browser values do. Since those defaults are what you are overwriting, this one style will accomplish what you are setting out to do.

Another option is to apply these values to the html and body elements. Because all the other elements on your page will be children of these two elements, the CSS cascade should apply these values to all those other elements.

html, body {
  margin: 0;
  padding: 0;
}

This will start your design in the same place on all browsers, but one thing to remember is that is 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.

Borders

You may be thinking "but no browsers have a border around the body element by default". This is not strictly true. Older versions of Internet Explorer have 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.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 9/27/16.