CSS Reset with Inline Block


/ Published in: CSS
Save to your folder(s)

Reset that I use for all my projects. I've added a class '.ib' at the end to easily add inline-block styling to any element.


Copy this code and paste it in your HTML
  1. /* v1.0 | 20080212 */
  2. html,body,div,span,applet,object,iframe,
  3. h1,h2,h3,h4,h5,h6,p,blockquote,pre,
  4. a,abbr,acronym,address,big,cite,code,
  5. del,dfn,em,font,img,ins,kbd,q,s,samp,
  6. small,strike,strong,sub,sup,tt,var,
  7. b,u,i,center,
  8. dl,dt,dd,ol,ul,li,
  9. fieldset,form,label,legend,
  10. table,caption,tbody,tfoot,thead,tr,th,td,button{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
  11. body{line-height:1;}
  12. ol,ul{list-style:none;}
  13. blockquote,q{quotes:none;}
  14. blockquote:before,blockquote:after,
  15. q:before,q:after{content:'';content:none;}
  16. /* remember to define focus styles! */
  17. :focus{outline:0;}
  18. /* remember to highlight inserts somehow! */
  19. ins{text-decoration:none;}
  20. del{text-decoration:line-through;}
  21. /* tables still need 'cellspacing="0"' in the markup */
  22. table{border-collapse:collapse;border-spacing:0;}
  23. /* Clear Floated Elements */
  24. .clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
  25. .clearfix:after{clear:both;content:'.';display:block;visibility:hidden;height:0;}
  26. .clearfix{display:inline-block;}
  27. * html .clearfix{height:1%;}
  28. .clearfix{display:block;}
  29. .contain{overflow:hidden;}
  30. .ib{display:inline-block;*display:inline;zoom:1;_height:1%;vertical-align:top;}
  31. button{cursor:pointer;}

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.