Intro to the box model
This lesson walks you through the box model — the model upon which the web (every website and web page) is built. You’ll learn that content is expressed in boxes, how that content flows like a text document, and how you have the power to fully control the way your content appears.
Video transcript
Intro to the box model is a foundational CSS lesson that explains how every HTML element is rendered as a rectangular box, and how the dimensions of that box are calculated based on its content, padding, border, and margin.
The box model has four parts. The content area is where your text and images live. Padding is the space between the content and the border. The border wraps around the padding. And margin is the space outside the border, between this element and its neighbors.
Understanding the box model is important because it directly affects how elements are sized and how they relate to each other in a layout. In CSS, the default box-sizing is content-box, which means the width and height you set apply only to the content area — padding and border are added on top. This can cause elements to be larger than expected.
A common fix is to use box-sizing: border-box, which makes the width and height you set include padding and border. This makes sizing more intuitive. In Webflow, elements use border-box sizing by default.
Getting the box model right is a prerequisite for understanding spacing, layout, and the behavior of elements in Flexbox and Grid.
