CSS is great, but it has some unusual quirks. One of its most annoying oddities has to do with how the width and height of elements are calculated. Take this CSS, for example:<\/p>\n
div.example {\r\n width: 100px;\r\n height: 100px;\r\n padding: 10px;\r\n border: solid 2px;\r\n}<\/code><\/pre>\nYou might expect the div.example<\/code> element to be 100 pixels wide and 100 pixels high, as those are the values specified for the width<\/code> and height<\/code> properties, but you would be wrong. The CSS above will actually result in a div.example<\/code> that has a width and height of 124 pixels<\/em>.<\/p>\nWhere did the number 124 come from? By default in CSS and element’s dimension are calculated using something called the content box model. That means the area where the content goes, in the middle of an element, are what the width<\/code> and height<\/code> properties apply to. So, in this case, our context box is made to be 100 pixels square. Then the padding and border are added on top of that. This results in a width of 124 pixels: 100 pixels of content width, 10 pixels of padding on either side, and 2 pixels of border on either side. 100 + 10 + 10 + 2 + 2 = 124. The height is calculated the same way.<\/p>\nQuirky, isn’t it? That’s not how most people think about this kind of thing. When you write something like width: 100px<\/code> you expect the thing to be 100 pixels wide, right?<\/p>\nWell, I’ve got good news! You can specify a different box sizing model in CSS that actually does what you would expect. All you need to do is set the box-sizing<\/code> property to border-box<\/code>, like this:<\/p>\ndiv.example {\r\n box-sizing: border-box;\r\n width: 100px;\r\n height: 100px;\r\n padding: 10px;\r\n border: solid 2px;\r\n}<\/code><\/pre>\nNow, instead of the width<\/code> and height<\/code> properties applying to the content box in the middle of the element, they instead apply to the outermost border box surrounding the outer edge of the element. This results in a 100 pixel square box, which is much more intuitive.<\/p>\nI don’t know about you, but I vastly prefer the border-box<\/code> model, which is why I almost always start every new project with the following CSS at the top of the stylesheet, which applies border-box<\/code> sizing to all elements so I don’t have to think about it again:<\/p>\n* {\r\n box-sizing: border-box;\r\n}\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"The default box model in CSS is a bit strange. Learn how to fix it.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-16","post","type-post","status-publish","format-standard","hentry","category-htmlcss"],"_links":{"self":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":10,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/16\/revisions"}],"predecessor-version":[{"id":141,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/16\/revisions\/141"}],"wp:attachment":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/media?parent=16"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/categories?post=16"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/tags?post=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}