CSS reset with box-sizing fix

For ultra lightweight projects where a framework is overkill, I tend to use Eric Meyers' CSS reset. And since I'm not a glutton for punishment, I also throw in the tried and tested box-sizing fix popularized by Paul Irish. Instead of searching for and combining these snippets every time I need them, here's a paste-ready version for convenience.

/* CSS reset with box-sizing fix */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
 display: block;
}
html {
 box-sizing: border-box;
}
*, *:before, *:after {
 box-sizing: inherit;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

No attribution necessary, as this code is considered public domain. Just copy and paste it into your new stylesheet and start designing!

Author avatar

About the author

New Hampshirite building web apps in Florida. Creator of Surreal CMS, Postleaf, and DirtyMarkup.

Need to get in touch? Catch me on Twitter.