Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
No matter what the topic, you can always find a handful of core concepts that are critical to understanding the subject properly. For CSS, the box model is certainly one of those concepts. 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.
If that makes you go, huh? well, think about it this way. Every single element on your web page is considered to be in a rectangular box. The properties of this box, its width, height, padding, and margin defined not only the sides of the element, but also how it relates to the elements around it, so yeah, it's pretty important. First, let's cover the basics, the properties that make up the box model. Now, here we have a nice visual representation of an element's box.
This could be a paragraph, a heading, a list item, really any element on your page. If we start on the outside of an 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. Margins are not used to calculate the final width of an element, but as you can see, they are very important in terms of how elements relate to each other and how much space an element requires within a 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: the border-width, border-style, and 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 defined the outside edge of an element and because their physical size is used when calculating the overall size of an element.
This often gets overlooked in many layouts, and more often than not, it can cause serious problems. Forgetting to add the size of the border to the size of an element can cause tight layouts to break, as elements will be anywhere between two to four pixels larger than anticipated. After borders we have padding. Padding is space added to an element inside the border. Now the easiest way to think of this is to imagine a box with something fragile inside of it that you need to ship. More than likely, you're going to add some packing material to the box to keep the fragile object from touching the edge of the box; that's padding.
Padding is totally transparent, and its value is used to calculate the overall width and height of an element. Finally, we have the width and height properties. You can set these properties for any element using either percentages or a fixed unit of measurement. It's important to remember, however, that there's a big difference between the width and height properties and the total width and height of an element. This tends to be very confusing to those that are new to CSS or simply unfamiliar with the box model. To calculate the total width of an element, use the left and right border values, the left and right padding values and the element's width property.
If you were thinking that this has probably tripped up a lot of designers, you would be right. Often layouts will break because the total width of an element is greater than anticipated. However, understanding this concept gives you the ability to confidently set values to all of the box model properties to fit specific layouts or regions. The box model, for the most part, is pretty simple. There are, however, a few things that can trip you up, 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. If you don't overwrite them, the default value will be applied. It's also a quite common to see authors set the width of the element to 100% in order to make it fit fully within a parent element. For the most part, that's fine, but any values for margins, borders, and padding will force the total width to be over 100%, making the element no longer fit. There are other things, like margin collapse, floated elements and considerations for undefined widths and heights, that you'll need to investigate as your understanding of the box model deepens.
For now, concentrate on the fact that the properties that make up the box model allow you to control the physical dimensions of the elements on your page, and that to fully and truly master visually formatting your elements, you'll need to understand the ins and outs of how those properties work.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.