The box model determines how the sizing of elements are calculated. Learn about a fix that can be applied to make writing CSS with the box model a little more intuitive.
- [Instructor] In the last exercise, we floated text around an image element. If the text was longer than the image, the remaining text flowed underneath, but what if you don't want the content to flow underneath? To do that, we'll need to create a container to group the text content as one component, to the right or the left-hand side. Before we get into that, let's take another look at how the box model works. In the CSS box model relationship, the width, height, padding, and border all contribute to the total size of the element.
Margin adds space around the element, and while it contributes to how much space the element takes up, it doesn't actually affect the size of the element. For example, if you had an element set to the width of 400 pixels, and a height of 200 pixels, it would take up 400 and 200 pixels horizontally and vertically. But if you add padding and a border the left and right values will be included in the total width, and the top and bottom values are now included in the height.
So, a box that started off with a width of 400 and a height of 200 is now 510 pixels by 310 pixels. Before we talk about how this affects page layouts, let's go over one more thing. The box sizing property. Just like many other default styles, there is a CSS property to change how the browser calculates the size of the box, called box-sizing. The default box-sizing value is content-box.
Padding and border will increase the total size of the content box. Changing the value to border-box will include padding and border when calculating the total width and height of the element. So if you set the width and height values to be 400 and 200 pixels, the element remains the same size because the padding and border actually pushes inward, making the content area smaller. This is often referred to as the box model fix. To use this fix, add this CSS code snippet to your projects.
Padding and border will no longer affect the overall sizing of the element. The snippet will set the box-sizing to border-box and add it to the HTML selector. In the second declaration block, the asterisk selector targets every single HTML element, and this will ensure that all elements will inherit the styles from the HTML declaration. So how does this affect page layouts? Let's take a look at an example. Let's say you had a container that is 400 pixels wide, with two boxes inside of it.
You set them both to a width of 200 pixels, so they can both float side by side and still remain within the 400 pixel-wide wrapper. Now let's say you add 20 pixels of padding. Now, they are each 240 pixels wide, and will no longer fit, because the wrapper is equal to 400 pixels. So what you can do is reduce the width down to 160 pixels to account for the extra space that the padding takes up.
But let's say now you want to add a border. The same problem happens again, even though we only added one pixel of border. The total width is still wider than the size of the wrapper. You can just keep adjusting the width or the height every time you change the padding or border, or you can just add the border-box fix to your code. This fix was first documented by Paul Irish. If you want to learn a little bit more about the history and the changes, you can check out his blog post.
For now, let's just grab this little snippet right here and add it to our example. Run the code again, and now, if I set the width back to 200 pixels, I can adjust the padding and the border anyway I'd like without affecting the total width.
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property