The CSS box model represents a fundamental concept in web design: every HTML element can be represented as a box.
The CSS box model includes properties like padding, border, margin, and content width/height, which define the space around and within an element.
How to check computed properties in developer tools
Playground Example: To make things simpler, you can click the button below to open the playground, which comes with pre-filled HTML and CSS.
In the editor, you will see HTML, CSS, and JS input on the left/top, and the output on the right/bottom.
To view the computed styles, we need to access developer tools.
The quickest way to access them is by using the Inspect button. Simply right-click on the element you want to check and select "Inspect" from the menu.
Then click on "Computed" to view the box model and computed properties.
Total Width and Total Height
It's important to remember that the total width and height of an element include padding and border.
Total element width = border-left + padding-left + width + padding-right + border-right
Total element height = padding-top + border-top + height + padding-bottom + border-bottom
Want to practice more? Click here for more hands-on exercise.
References: