Intro to the box model

An overview of the box model — how it shapes web design and gives you more flexibility to build layouts in Webflow.

This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

The box model describes how layout works on the web.

Tools like Photoshop or PowerPoint allow you to position elements anywhere in a given document. Web layout is based on content stacking vertically, like paragraphs in a document. 

In this lesson:
  1. Understanding boxes
  2. Using boxes for responsive design
  3. Grouping boxes
  4. Nesting boxes

Understanding boxes

All elements are boxes. Every element on this web page is treated as a box — imagine an invisible boundary around each element. These boxes naturally sit next to each other or stack on top of each other, depending on their properties.

Using boxes for responsive design

Web content is not like a PowerPoint or Photoshop document, where elements can be manually positioned anywhere. These documents aren’t responsive — the content is created to be viewed at one resolution.


Instead, web layout behaves more like a Word document — content flows naturally from the top-left of the page, wrapping whenever it hits the boundary of the document. It’s responsive because the content conforms to different resolutions.


At first, the box model sounds rigid, but it actually offers tremendous flexibility when creating responsive layouts for varying devices and screen sizes.

Learn more about responsive design.


Grouping boxes

An important aspect of the box model is that it allows you to insert boxes inside other boxes (i.e., "nest" them). That means that you can drop any Webflow element into another element. All the elements in Webflow are boxes that can be nested inside each other. For example, you can place the heading, paragraph and image elements inside a container. This container groups these other elements together, and whenever you move the container, all the boxes inside it come along.


Learn more about element hierarchy.

Nesting boxes

When the contents of a box increase, the size of the box naturally increases too. That means there’s usually no need to set defined heights on elements — instead, we can let the content determine the height.

But how do we create spacing between elements? That’s where margin and padding come in. Margin creates space outside a box, pushing other boxes away, and padding creates space inside a box. This can be applied to any box — a box that contains other boxes (a "parent" element), or the boxes inside (the "child" elements).


Stacking vertically and horizontally

You can create a simple website by just adding content to a page and adjusting padding and margin. But you'll often need elements to distribute horizontally or in a specific place on the screen. That’s where different layout techniques come into play. Display settings control the default display or layout behavior of elements, and positioning properties control other layout behaviors.

Try Webflow — it's free

Production for this lesson

Directed by


Produced by


Written by


Article by


Edited by


Designs by


Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback