{"id":1052,"date":"2013-08-24T15:00:26","date_gmt":"2013-08-25T01:00:26","guid":{"rendered":"http:\/\/mymonkeydo.com\/?p=1052"},"modified":"2013-08-24T15:00:26","modified_gmt":"2013-08-25T01:00:26","slug":"what-is-box-sizing-and-border-box","status":"publish","type":"post","link":"https:\/\/mymonkeydo.com\/what-is-box-sizing-and-border-box\/","title":{"rendered":"What is box-sizing and border-box?"},"content":{"rendered":"
In the latest WordPress theme, twentythirteen, I noticed styles that had padding didn’t affect the width of my box. \u00a0Whenever I add padding, the inside just got smaller and the outside stayed the same. \u00a0Was I dreaming all this time thinking the padding affected the overall width? \u00a0What world was I living in where you say this div is 100px wide, but if there’s 10px padding on each side the width should actually be 80px?<\/p>\n
No, I wasn’t dreaming. \u00a0The WordPress twentythirteen theme has a style called<\/p>\n
box-sizing:border-box<\/pre>\n. \u00a0This causes the width to stay the width and the padding to be on the inside and not affect the width. \u00a0This is amazingly<\/strong> supported in IE 8 and up, and, with some prefixes, webkit and firefox. \u00a0 \u00a0I will always be using the below code from now on.<\/p>\n
\n\n* {\n position: relative;\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n<\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[2],"tags":[17,64],"yoast_head":"\nWhat is box-sizing and border-box? - My Monkey Do<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n