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.

getting-started
 
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.

A powerpoint slide includes two gray rectangles forming an L shape, two text boxes and an image. The elements are selected and exposing their bounding boxes while being laid out.

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.

A word document includes a title, subtitle, a paragraph, image and two other paragraphs beneath it. The image is in between two paragraphs of text.

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.

A website is displayed it in three responsive breakpoints. A desktop, tablet and mobile layouts are included.

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.

A container includes a sub heading, H2 heading, paragraph and image elements. There are three images laid out that contain jellyfishes glowing underwater.

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

On the left, a container has margin added outside the box. On the right, a container has padding added inside of the box.

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.