Previewing the Box Model in the Browser

The box model is a crucial concept to understand in CSS. When a browser renders an element on the screen, it always uses this box model to calculate how the element will look.

The box model is so important that any modern browser’s dev tools utility has a special preview. Its preview shows the information on every HTML element you inspect using the dev tools inspector.

Overview

Let’s say we have a piece of content, for example, the words “This is how” printed on the screen.

Of course, this content could be any other number of words. It could even be an image. Whether it is a piece of text or an image, let’s call it content.

So, in our practical example of a piece of content on a web page, we’re looking at the example that reads “This is how.”

When users visit a web page, they’ll see the piece of content: “This is how.” However, if we inspect it in the browser’s dev tools, we can see that it looks like this: