The CSS box model is the foundation of layout on the Web. It describes the rules surrounding the physical properties of all HTML elements.
- [Narrator] The CSS Box Model truly is the foundation of layout on the web. Without understanding the Box Model, almost every task related to the physical relationships of elements would be more difficult. If, on the other hand, you have a thorough grasp of the Box Model, tasks like page layout become much easier. So what is the Box Model? Well the Box Model is the term used to describe the rules surrounding the physical properties of all HTML elements. Basically, you can think about it this way. Every single element on your webpage is considered to be in a rectangular box.
And the properties of this box, its width, the height, the padding, and margin define not only the size of that element, but also how it relates to the elements around it. Let's start with the basics, those properties that make up the Box Model. Now here we've got a visual representation of an element's box, and this could be a paragraph, a heading, a list item, it doesn't matter. Really what we're just highlighting here is that the Box Model refers to every element on a page. So if we start on the outside of the element, the first item we encounter is the element's margin.
Margins represent the space around an element and are used to define the space between page elements. Now margins are not used to calculate the full width of an element. But, as you can see, they're very important in terms of how elements relate to each other, and how much space an element requires within layout. The next property we come to is the element's border. All elements are allowed to have a border assigned to it even though by default most elements don't have one. Borders have three properties that define the border itself.
You've got the border-width, the border-style, and the border-color. You can also assign borders individually to the top, right, bottom, and left sides of an element. Borders are considered to be part of the Box Model because they define the outside edge of an element, and because their physical size is used when you're calculating the overall size of an element. After borders, we have padding. Padding is the space added to an element inside the border. The amount of padding is used to calculate the overall width and height of an element, just like borders.
Finally we have the width and height properties. Something to note here, there is a difference between the width and height properties, and the total width and height of an element. This tripped me up more than once in my early CSS days, but the default total width of an element is the sum of its left and right border values, the left and right padding values, and whatever the elements width property is. This often confuses new developers as they assume that the value applied to the width property represents the total width of the element.
So you'll just want to remember to account for borders and padding when calculating overall width. Now if you want to get around this, it is possible through the Box Sizing property. Box Sizing accepts two values, content box or border box. The content box property calculates the width and height using the default method that I just mentioned. The border box property however includes the border and padding values into the width and height values allowing you to set a total width of an element through the width property.
The Box Model itself really isn't too difficult once you start to look at it, but there are a few gotchas that can get you if you're not careful. First, just because a property isn't declared, don't assume that its value is zero. Remember that all browsers have default styles that apply to HTML elements, and if you don't override them the default value will be applied. It's also quite common to see authors set the width of an element to 100% in order to try and make it fit fully within a parent element. For the most part that's okay, but unless you're using that box sizing property any values for margin, borders, and padding will force that total width to be over 100%.
There are certainly other aspects besides these to the Box Model, but these are the most basic ones that will allow you to control the dimensions of an element on a page.
- What is CSS?
- Understanding how CSS works with HTML
- Applying fonts
- Understanding the classic box model
- Setting margins and padding
- Positioning elements
- Basic CSS layout concepts
- Media types and media queries
- Working with CSS frameworks and CSS grids
- Creating responsive layouts
- Tools that help you write and maintain CSS