Sensible CSS defaults

These CSS styles will speed up the time it takes to start a new project:

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

The first rule says that, for elements, include the border and padding in the size calculations. This makes most sizing effects far more intuitive.

The second rule sets the margins on all elements to 0.

The third rule, applied to the img selector, turns all images into block elements instead of inline elements.

Finally, setting a max-width of 100% for all the img elements sets you up for responsive design.

Altogether, these four rules make elements behave a bit more intuitively.

One response to “Sensible CSS defaults”

  1. […] in it’s width calculation. Had the Internet Explorer model prevailed, the code in the Sensible CSS Defaults post could have been one line shorter: box-sizing: border-box; would not be […]

Leave a Reply

Your email address will not be published.

Color scheme: