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:
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.
