CSS Box Model
Have you ever noticed this diagram with all of those squares within squares under “Elements” in DevTools?
Every wonder what it is? You can get a general idea of what it is trying to tell you, and it’s fun to hover your mouse over it, but what really is for and how can it help?
It turns out this is called the CSS Box model. You may have noticed when you’re in the browser’s inspection tool that as you hover over different elements on your page they get highlighted in blue. What is being highlighted is this box model. Your browser wraps every HTML element in this rectangle box. This box is made up of four different parts defined by their outer edge, and that can each be manipulated individually with CSS. These four parts are (from center to outermost) the content area, padding, border, and margin. When you are manipulating these four parts what you are really doing is changing the top edge, bottom edge, left edge, and right edge. The top and bottom make up the height, and left and right make up the width. If you played around with CSS before then you’ve probably played around with these different parts. To understand the CSS Box model you really need to understand these four parts individually and how they work together. So let’s dive in.
First, right below is an example of what the box model diagram and the browser looks like for a simple <h1> element without any css added aside from a background color, and a basic border. By default other properties may be added depending on the element or tag you are using, in my example the margin was added. You can also see dimensions in the center of the box which represents the height and width of just the content area. I should point out that when taking this screenshot I had the inspection tool open which does change the dimensions in the diagram. So keep in mind that the size of your browser window does affect the box.
A note about the numbers inside the diagram: these are pixels, or “px”. Other units can be used when playing around with css properties, like “px”, or “em”, or even a percentage (%). For more information about all of the units that can be used you can check out this site.
Content
At the center of the box model is the content area, again defined by its four edges. The content area contains the actual content that you added, like text or an image. In your CSS file you would be changing this area with properties like width, height, max-height, max-width, min-height, and min-width. When using these properties you are only changing the area with the edges of the content area. Below I have changed the width property to 50% (width: 50%;). Take a look at how it was affected in the browser and the diagram. As you probably guess it is now taking up half of the content area and in the diagram the width is now half of what it used to be, but the border remains the same.
Padding
Moving outward the padding area is next. It surrounds the content area. When changed you are creating space around the content area and actually extending the content area. Padding can be changed with the following properties: padding-top, padding-bottom, padding-left, and padding-right. You can also use the short-hand “padding:”. With this short-hand you can change each of the four sides in one line. Check out w3schools explanation on how to use this shorthand as it can be used in many different ways. In my example I have added a padding-left property of 10% (padding-left: 10%;). Notice how the text has shifted to right within the content area and the width appears to be a bit longer. What happened here is that 10%, which is 10% of the full width of the browser, has been added to the content area’s left edge. The dimensions of content area have remained the same, though. What was added is just padding.
Border
The next area is the border. When changed the border can extend the padding area. The border can be changed with properties similar to padding. They include border-width, border-height, etc., but the style of the border can be changed, as well, with properties such as border-color and border-style. In my example I have added the shorthand property of “border: 10pt solid black;”. The “10pt” determines the border-width, or thickness. “Solid” is the style of the border. And “black” is the color. All of these properties can be changed individually. See how it changes my example in the browser and diagram. The change in the browser is very apparent, and in the diagram you can see the dimension of the border has changed on all four sides. The content and padding area dimensions have changed in my example but this is only because I had to widen the inspection tool’s window. But, in fact they were not affected by the change to the border.
Margin
The outermost area is the margin. The margin area is an empty area around the border that helps to separate the element from any adjacent elements. To change the margin you can use margin-top, margin-bottom, margin-right, margin-left, and the shorthand margin. The shorthand will work similarly to the padding shorthand. In my example I have added a second element below my original one. In my original element I added a property and value of “margin-bottom: 100px;”. In the screenshots below the first is the two elements with the default margin, and the second is with the newly added margin property. And as you can see with the diagram, all that has changed is the bottom margin area.
Conclusion
There is much more to learn about the CSS Box model and the four different areas that make up the box. There are many other ways css can change these areas and change how they interact with each other. I hope the info above helps to make css a little easier to understand.