Here’s another entry from Russ Weakley’s series of JumpCast videos on aspects of CSS3.
This is just one of many in the Learnable JumpCast library of short, practical video tutorials.
This week, Australian CSS expert Russ Weakley gives you the lowdown on using the new CSS3 box-sizing property. You’ll find the transcript further down the page.
G’day, my name is Russ Weakley from Max Design. Today, we’re going to look at the new CSS3 box-sizing and property. I want to start the discussion talking about the three boxes because they’ll play a big part in the box-sizing property.
So although you can’t see it, there’s an invisible box around your content of any element, and this box is called the content-box. Now, if we go to add padding all around the sides of this element, we’ll then have our second box called the padding-box. And if we add a border around the padding-box, we have the third box called the border-box.
Now, you may not see this, but of course there’s also sometimes an invisible margin around the box, but that doesn’t really come into play when we’re discussing the box model.
Now these three values – the content-box, the padding-box, and the border-box – are used in the background-origin and the background-clip properties. Even though I’m not going to talk about these here, but these three values – the content-box, the padding-box, and border-box – are also used as values in the box-sizing property. So that’s why we need to talk about them, but we’ll get on to that a bit later.
Another thing I want to talk about is the additive and subtractive box models. So the additive box model is where you give an element a width or a height and then you add border and padding to the element, and these are added to the overall amount. So a quick example would be where you take an element and you give it 200px width. If you then add padding and border, the actual size of the element could become much larger, like in this case 280 pixels wide.
The subtractive box model is the opposite. That’s where you give the width to an element, and then border and padding are subtracted from the overall amount. So in the case, if you gave the element 200 pixels width and then gave it padding and border, that would subtract from the overall amount, and the actual content-box would only be 120 pixels wide.
Now a lot of people remember the IE5 and earlier IE browsers used to use this subtractive box model, while all the other browsers used to use the additive box model, which was very frustrating for a lot of developers.
But a lot people don’t know that the subtractive box model is actually used in some specific instances in elements, and just as a quick side note, here’s an example. If you took a block level element, like a div, and placed it inside a container, but don’t give it a width and then give it padding and border, the subtractive box model is used. So you can go and try that if you like. Grab a div, place it inside a container, put a border around it, and give it padding. Now it won’t poke outside the container width. So, right there, it’s using the subtractive box model.
Another example is you can take a div, give it absolute positioning, and actually stretch it by setting left to 0 and right to 0. Suddenly that absolutely position box will be stretched. Now if you give that padding and border, again the content-box will be reduced, but the absolute position element won’t poke outside of the container. So a subtractive box model is used.
And another example is a
<table> element. Now, by default, the
<table> element will use the subtractive box model. So if you put border and padding around an element like the
<table> element itself or within TDs, etc., then these amounts are taken away from the overall amount, rather than being added on. So there are definitely instances where the subtractive box model is used in everyday occurrences.
Now despite these cases, most elements and instances use the additive box model. Now unfortunately, as you’ll see in a second, this additive box model doesn’t work very well when we start to do liquid layouts. Let’s go and have a look at some examples.
Okay, let’s have a look at box-sizing in action. So, here we have an HTML file, and if we go down and look at the markup, you’ll see we have a div with a class of container. So that’s our container that will wrap around the page. Then we have a form, and inside the form there’s another div and then there’s a label and the input element. Now this input element has been given a class of input. Now if we go back up here and look at the CSS, you’ll see the container has been set with a width of 70%, and it’s got a border of 1px solid red. Now, that’s what it looks like at the moment. As you can see, the input element is very small.
But what happens if we go and give the input element a width of 100%? And what about if we give it a border of 2px black? And then what happens if we give padding? Something like 10px all around? Now because this is set to 100%, it will be 100% of the width of the parent container. But we’ve added on top of that 2px on either side and 10px on either side for the padding, and so as you’ll see, the element now pokes out the side of the parent container.
Now this is where the box-sizing property comes in. We can simply write a new property called box-sizing, and the properties that we can put in there or the values that we can put in there are these ones. Now we can set it to content-box. Now the reality is that the content-box is the default. It’s the actual initial value, but it’s also the standard additive box model, meaning that if we use that, we’re going to be in exactly the same predicament because it will use the content-box to start with and then add padding and border on top.
Now the second option is padding-box, but that’s not very well supported at all, and it’s not really the one we want to focus on.
And in fact, the third one is the best one to really focus on, the border-box. Now what this means is if we say box-sizing border-box, then it doesn’t matter how much border or padding we add to the box, it will never exceed the 100% wide.
Of course the other option is inherit, which will inherit from the parent.
But what if we just try the border-box and see if that solves our problem? So here we have our input, 100% wide, a border of 2px on either side, and a padding of 10px on either side. But if go and reload, you’ll see now that the input fits within that parent element, and even though this is a liquid layout, it will always fit inside.
So as you can see, the box-sizing property is an amazing thing to have up your sleeve, especially when you’re doing liquid layouts.
One final point on the box-sizing property is how well it’s supported. Well, luckily, the box-sizing property is quite well supported from IE8 upwards, and in fact it was only the early versions of Firefox and Safari that needed the prefix in front of it. So in some instances this may not suit your needs if you still have to support all of the browsers. But if you are able to support from IE8 upwards, all the modern browsers now support box-sizing properties without the need for prefixes.
Find more great videos like at Learnable.
Russ Weakley is a world-renowned author, speaker and CSS expert, with a detailed knowledge of web design and development. Russ chairs the Web Standards Group (WSG) and produced a series of widely acclaimed Learnable tutorials on CSS. He is currently touring a series of Responsive Web Design workshops around Australia.