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:

Get hands-on with 1200+ tech skills courses.