I am just coming out of my first technical interview(it was a mock interview🤓). Everyone’s fear is they will be asked a question and completely draw a blank. Well, that happened to me and it was for a surprisingly easy question, what is a CSS box model? My mind raced thinking I use CSS all the time, but how do I not know what that is!? The truth was, during my Bootcamp, I relied on frameworks like Tailwind CSS and Bootstrap and did not take the time to learn fundamental CSS terms. So let’s learn together what a CSS box model is!
What is it?
The CSS box model is a set of rules that defines how every HTML element is rendered on a web page. The term box model is used when referring to the design and layout. According to the rules, all HTML elements can be thought of as boxes. So basically the idea is that there is a box that wraps around all HTML elements and consists of four different parts:
Want to read this story later? Save it in Journal.
This youtube video explains the CSS box model in terms of a house and its surroundings. This helped me a lot so follow below!
Content is our house. This is where the content of the element lives (like text, an image, or nested elements). The width and height properties are applied to the content area by default.
Padding is the lawn or area between the house and fence. It is the transparent spacing between the element’s content and the element’s border. Think of padding as being able to give breathing room to your content. Values for padding are set with the padding property. These values increase the total width and height of your element in addition to the height and width set on the content area.
The border is the fence. This is the divider around your element that is sometimes visible depending on your border properties set. The border is still a part of your element and the thickness of the border can be set using border-width. The border’s width adds to the width of the total element and separates the element from the rest of the web page.
Lastly, this is the empty space around your element used to separate it from its neighbors. Margin determines the space between your element and other elements around it. Something that is important to note is that margins collapse on each other which means when two boxes are touching each other the space between the two will equal the greater of the two margins.
Calculating the Width and Height of An Element
When you set the width and height properties to an HTML element, this is applied only to the content area. To calculate the full size of an element you need to include padding, borders, and margins. Let’s say we have a div element with the below properties.
border: 15px solid black;
You would calculate the div width like …
Total element width = content width + left padding + right padding + left border + right border + left margin + right margin
So total width = 200 + 10 + 10 + 15 + 15 + 5 + 5, which comes out to 260px. The total height of the div would be calculated like below…
Total element height = content height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
Calculating the total height and width is important when building the layout for your application. Keeping the box model in mind will help build a cleaner interface and save you time. Below are some helpful resources below if you want to learn more!
Introduction to the CSS basic box model
When laying out a document, the browser's rendering engine represents each element as a rectangular box according to…