* { Box-sizing: Border-box } FTW

This commit is contained in:
Barry Clark 2014-06-02 19:10:43 -04:00
parent 2925163682
commit 54d20da44f
3 changed files with 13 additions and 3 deletions

View file

@ -23,7 +23,7 @@ time, mark, audio, video {
font: inherit; font: inherit;
vertical-align: baseline; vertical-align: baseline;
} }
/* HTML5 display-role reset for older browsers */ // HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure, article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { footer, header, hgroup, menu, nav, section {
display: block; display: block;
@ -46,3 +46,8 @@ table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
} }
// Apply a natural box layout model to all elements
// from: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

View file

@ -23,7 +23,7 @@ body {
.container { .container {
margin: 0 auto; margin: 0 auto;
max-width: 740px; max-width: 740px;
//padding: 0 20px; padding: 0 10px;
width: 100%; width: 100%;
} }

View file

@ -9,7 +9,6 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
font: inherit; font: inherit;
vertical-align: baseline; } vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block; } display: block; }
@ -30,6 +29,11 @@ table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } border-spacing: 0; }
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
/*/ /*/
/* BASE RULES /* BASE RULES
/*/ /*/
@ -44,6 +48,7 @@ body {
.container { .container {
margin: 0 auto; margin: 0 auto;
max-width: 740px; max-width: 740px;
padding: 0 10px;
width: 100%; } width: 100%; }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {