{"id":76,"date":"2002-11-23T16:30:06","date_gmt":"2002-11-23T21:30:06","guid":{"rendered":"http:\/\/sovogo.com\/2002\/11\/23\/css-box-sizing\/"},"modified":"2002-11-23T16:30:06","modified_gmt":"2002-11-23T21:30:06","slug":"css-box-sizing","status":"publish","type":"post","link":"https:\/\/dylanschiemann.com\/?p=76","title":{"rendered":"css box-sizing"},"content":{"rendered":"<p>A mostly unknown CSS 3 property called <a href=\"http:\/\/www.w3.org\/TR\/css3-ui\/#box-sizing\">box-sizing<\/a> allows developers to set the definition of width and height to the W3C CSS box model or the box model implemented in Internet Explorer 4 and 5.  The CSS model includes the width of the content&#8230; padding, borders and margin are excluded.  The IE box model includes the padding and the border.  This causes a lot of problems for web developers who want elements to fit within a certain space.  Defining a box to fit within a space using the IE model causes the box to be too wide in a CSS-complaint browser, and defining one to fit in a CSS-compliant browser is too narrow in many versions of Internet Explorer.  CSS3 lets you set box-sizing to be content-box (default) or border-box (IE behavior).  <a href=\"http:\/\/www.mozilla.org\/\">mozilla<\/a> has already implemented this using the -moz prefix for test implementations, -moz-box-sizing.  <a href=\"http:\/\/www.mozilla.org\">mozilla<\/a> and other vendors are encouraged to use a prefix to a name when implementing a feature that has not reached official <a href=\"http:\/\/www.w3.org\/\">W3C<\/a> recommendation status.  This is a good thing as it doesn&#8217;t require workarounds ( such as Tantek Celik&#8217;s <a href=\"http:\/\/www.tantek.com\/CSS\/Examples\/boxmodelhack.html\">Box Model Hack<\/a> ) in the future if the standard is incompatible with a vendor implementation.\n<\/p>\n<p>\nUpdate: David Schontzler uses <a href=\"http:\/\/www.stilleye.com\/scripts\/marginfix\/\">JavaScript to make Internet Explorer&#8217;s margins consistent with the W3C box model<\/a>.  An interesting approach to fixing the related margin:auto bug.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A mostly unknown CSS 3 property called box-sizing allows developers to set the definition of width and height to the W3C CSS box model or the box model implemented in Internet Explorer 4 and 5. The CSS model includes the width of the content&#8230; padding, borders and margin are excluded. The IE box model includes [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[8,6,1],"tags":[],"_links":{"self":[{"href":"https:\/\/dylanschiemann.com\/index.php?rest_route=\/wp\/v2\/posts\/76"}],"collection":[{"href":"https:\/\/dylanschiemann.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dylanschiemann.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dylanschiemann.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dylanschiemann.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=76"}],"version-history":[{"count":0,"href":"https:\/\/dylanschiemann.com\/index.php?rest_route=\/wp\/v2\/posts\/76\/revisions"}],"wp:attachment":[{"href":"https:\/\/dylanschiemann.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=76"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dylanschiemann.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=76"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dylanschiemann.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=76"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}