Intro to the box model

Learn about the box model and how it shapes web design.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

Everything on the web is structured using the box model. HTML elements (e.g., paragraphs, div blocks, sections, etc.) are expressed in boxes, and website layouts stack these elements vertically, like boxes on top of each other.

In this lesson, you’ll learn:

  1. How the web uses boxes
  2. How to use boxes for responsive design
  3. How to nest boxes
  4. How to style boxes

How the web uses boxes

All HTML elements (i.e., paragraphs, div blocks, sections) are expressed in boxes on the web. You can imagine an invisible boundary around each element, which contains that element within a box. You can style elements and website layouts using these invisible boxes (e.g., you can add space around an element’s box, or add a border to an element’s box). These boxes sit next to each other or stack on top of each other, depending on their properties.

How to use boxes for responsive design

Web content isn’t like a slideshow, where elements can be manually positioned anywhere. On slideshows, content is created to be viewed at 1 resolution and isn’t responsive on devices and browsers of different sizes.

Web layouts behave more like a text document, where content flows naturally from the top-left of the page, then moves to the next line (i.e., wraps) when it hits the right-side boundary of the document. The content is responsive because the content conforms to different resolutions. For instance, if you resize a text document window, the content layout will adjust accordingly, without decreasing the size of the content.

At first, the box model may sound rigid, but it offers tremendous flexibility when creating responsive layouts for varying devices and screen sizes. Learn more about responsive design.

A desktop view and mobile portrait view of a website are compared.
The top image (i.e., “1”) shows a website on a desktop viewport. The bottom image (i.e., “2”) shows the same website on a mobile device viewport. The website uses responsive design to resize while keeping content the same.

How to nest boxes

One important aspect of the box model is that it allows you to put boxes inside other boxes (i.e., “nest” boxes). That means that you can drop elements into other elements to add flexibility to your design.

2 cards are displayed next to each other. Each card has an image, heading, paragraph, and button nested inside a box.
Boxes are nested inside of other boxes in 2 cards.

Like other elements on the web, Webflow elements are boxes that you can nest inside each other. For example, you can place a heading and a paragraph element inside a container element. The container groups these elements together, and if you move the container all the boxes inside it move too. Learn more about element hierarchy.

How to style boxes

You can use CSS (Cascading Style Sheets) to style boxes (i.e., elements). Boxes aren’t fixed — you have control over all their styling.

How to add spacing within and between boxes

By default, when the contents of a box increase, the size of the box increases too. That means there’s usually no need to set defined heights on elements — instead, you can let the content determine the height. For instance, if you have a heading and paragraph element inside of a container element, the container’s height is determined by the heading and paragraph elements.

You can also create spacing between elements and within elements with margin and padding. Margin creates space outside a box, pushing other boxes away, and padding creates space within a box (between the box’s borders and its contents). This spacing can be applied to any box — a box that contains other boxes (a “parent” element), or the boxes inside another box (the “children” elements).

Margin and padding have been added to card layouts on 2 images.

How to change box layouts

You can create a website by just adding content to a page and adjusting padding and margin. But you'll often want to change the layout of elements, so they distribute horizontally or in a specific place on the screen. That’s when you can use display settings and position properties to control an element’s layout behavior.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top