Meyer Reset

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
/* remember to define focus styles! */
:focus {
	outline: 0;
body {
	line-height: 1;
	color: black;
	background: white;
ol, ul {
	list-style: none;
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
caption, th, td {
	text-align: left;
	font-weight: normal;
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
blockquote, q {
	quotes: "" "";

Source: Reset Reloaded

Condensed version:

html,body,div,span,applet,object,iframe,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,label,legend,p,blockquote,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}body{line-height:1;color:black;background:white;}:focus{outline:0;}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}abbr,acronym{border:0;}


  1. Dustin Hansen
    Permalink to comment#

    I’ve noticed a trend lately of designers resetting the :focus. What if anything do you do to restore behavior for accessibility-based browsers?

    • Nick
      Permalink to comment#

      Even Eric mentioned it in the code above:

      /* remember to define focus styles! */

      If you dont want to reset the focus styles then remove or comment out that focus reset style.


  2. Chris Raymond
    Permalink to comment#

    Line-height should be AT LEAST 1.25, better 1.5 or even 1.75, to help the eye make the jump to the next line in a block of text.

    This is my biggest gripe about Meyer’s reset. Line-height: 1 is just plain bad typography, and while, yes, one can change it in your own stylesheet, most folks just blindly use this and make their blog articles pretty darn unreadable.

  3. Gastón Lasarte
    Permalink to comment#

    Another thing that I would have considered… where the anchor links display set to block…

    Thanks for this! Very helpfull :)!

  4. Joshua Brittin
    Permalink to comment#

    This is a css reset, designed to get all browsers rendering the same, therefore line-height should be set to 1. Also, setting the anchor links to display block would be a nightmare.

  5. BJ
    Permalink to comment#

    Can div be reset to display:block; like the elements of HTML5? Just curious wanting to know why not to do this.

  6. Cleaners London
    Permalink to comment#

    “Can div be reset to display:block; like the elements of HTML5? Just curious wanting to know why not to do this.” – Yeah I would like to know the same.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.