Alright so we’ve all been there, while we are trying to create the layout of our website we want to give it a border and then BLAM-MO! All of the sudden all of the CSS you’ve been working on goes on the fritz and your whole layout looks like some weird mismatch of parent elements being smaller than your child elements.
You think to yourself “I could have sworn I used 100%” and you double back and see that you have. So now you’re left wonder what happened, well it might be because you don’t know about the Box-Sizing attribute.
Box-Sizing has 3 possible behaviors it can use;
padding-box. For the purposes of this article we’ll focus on the first 2 since
padding-box doesn’t really translate outside of Firefox.
Content-box gives a lot of CSS beginners headaches as you don’t really know that it’s the default value for all of your CSS elements. Its hard to find out how the Content-box style derived from, but it seems that users were working were forced to use the Flexible Box Model which when used would allow box dimensions to be manipulated. Content Box determines that when an element is created it’s content determining factor in the box’s over all real estate.
Let’s say you have a
<div id="parent"> inside of another
<div id="child">. We’ll have the parent
div occupy 50% of the page. Which means that without
padding, our content will occupy 50% of the page. If we determine that the child will be 100% of the width of the parent, well the content will fit 100%, but once we try to add more to it the content will still be at 100% and the rest will go around it.
In comes Box-Model, this behavior says that once the box has a determined width and height, that’s it. The Padding, Border and Margins all have to fit within those specific dimensions. This is a relief because you know how big your box will actually be.
Keep in mind that there are probably tons of layouts and legacy sites that use the default content-box and so it’s import to know what you’re dealing with once you get into an older developed site.
Box Model for us can definitely help create sites that are more responsive and fit better as more and more screen sizes exists. So if you haven’t changed your default box-sizing try it out and find out what you’ve been missing out on.
If you wanna see it all for yourself I have a Codepen that can give you a taste of what’s going on.
Cascading Style Sheets (CSS) Snapshot 2010
This document collects together into one definition all the specs that together form the current state of Cascading…
Home of the MDN interactive code examples. Should you have any questions regarding this project, please feel free to…
One of my least favorite parts about layout with CSS is the relationship of width and padding. You're busy defining…
The CSS Box Model
When displaying a document on a browser, the elements are displayed as rectangular containers according to the standard…
CSS Box Sizing Module Level 3
This section is not normative. CSS layout has several different concepts of automatic sizing that are used in various…