The Box Model

Overview of the box model

When rendering a document, the browser sees each element as a rectangular box; this is the box model. CSS determines the size of the box, and is based on the following properties:

• content
• padding
• border
• margin

A good way to visualize this is to open our browser’s DevToolsCheck this out by right-clicking an element and selecting “Inspect,” then see the layout panel in DevTools. and look at how it’s displayed:

Here, we can examine the box model of any element on a page. The area in light blue is the content box. Around it, we have the padding, the border, and the margin. This is our box model! These various sections are defined as follows:

The content property: This is where our content is displayed. It can be sized using the width and height properties. It’s typically where any text and images appear.

The padding property: The padding sits around the content, is transparent by default. Its size is set using the padding ...