The Box Model

The box model describes how layout works on the web. Unlike other design environments (like Photoshop or Sketch) that allow you to position elements anywhere in a given document, the web places elements in boxes that you control the positioning of to indirectly create layouts. In this video, we’ll discuss:

  1. The box model
  2. How the box model facilitates responsive web design
  3. Grouping boxes
  4. Positioning boxes to create layouts
  • This is a basic web document. It's simple, and it's made of up a heading, some text, a few images, and some illegibly small buttons.
  • Each of these elements is treated as a box — you can imagine an invisible boundary on each of them. These boxes sit next to each other and stack on top of one another depending on the properties we give them.
  • It's helpful to think of web content not like a PowerPoint document, where content is simply positioned wherever — completely non-responsive and stuck in a fixed slide...but more like a Word document — where content flows naturally from the top-left of the page.
  • At first, this might seem kind of rigid. But it actually gives us tremendous flexibility as we create layouts for all kinds of screen sizes and devices.
  • Think again about PowerPoint. Looks great on a wide screen like this. But what if we try to scale it down to a phone? Not so great.
  • But a web document? Again, this content flows naturally.
  • The other great thing about the box model is that we can organize boxes inside of other boxes. Headings? That's a box. Paragraphs? That's a box? Images? That's a broccoli box, a Bach box, a Brach's box, a Barack box, and of course, who could forget: the box box.
  • And since we've put all these boxes in another box, that box can be used to organize and style the boxes inside!
  • Here's a practical example of a layout we might encounter on the web. Since each of the elements inside are boxes — we can move and push content around using padding to affect the space inside of a box, and margin to affect the space outside of a box (in between that box and the boxes around it).
  • The big takeaway here is that the web is responsive. We can add all sorts of content to our document and it naturally flows like content in a Word document. Each element on the web is its own box. They can stack. They can wrap. They sit next to each other. And we control the styling and the layout of each and every box on the page.

Up next

Play

Element Hierarchy

To succeed in web design, and with Webflow, it's vital that you understand how elements hierarchy affects styling and sizing.

Episodes

Intro
Play
Intro
Intro to the designer
Play
Intro to the designer
Intro to HTML & CSS
Play
Intro to HTML & CSS
Web Structure
Play
Web Structure
The Box Model
Play
The Box Model
Element Hierarchy
Play
Element Hierarchy
Navigator
Play
Navigator
Element Basics
Play
Element Basics
Element Panel
Play
Element Panel