The box model is what determines the structure, layout, and dimensions of all the elements on a page. Since Webflow is built on coding best practices, understanding the box model — even if you're not planning on fully mastering HTML and CSS — greatly deepens your understanding of Webflow.
The benefits are aplenty: Better-structured Webflow sites results in better-structured Webflow code. Better code, in turn, makes it easier to design responsively because elements will behave more expectedly and more naturally at the various “break points” corresponding to mobile device screen sizes.
But, more than anything, if you’re a design professional, don’t you want to have a true understanding of your craft?
Designers who do not use Webflow will also get a lot of value from learning about the box model. It's a concept that sets up a foundation for (optionally) learning the entirety of HTML and CSS if desired! All this and more is why we’re exploring nothing but the box model in this post. You’re going to learn it in plain English, and you’re going to walk away feeling more empowered as a designer.
Let’s do this.
So, what exactly is the “box model?” In short, the box model's impact is that everything you see on a web page is composed of a series of boxes. Yes, absolutely everything. Even buttons with round corners (these are just boxes with a border radius!)
Here is the official definition from the W3C standards body (which oversees the HTML and CSS specifications):
The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.
Don’t let that intimidate you. They’re just trying to sound cool. Let’s break it down in plain English:
The navigation bar on your homepage? That’s a box. The individual links within the navigation bar? Those are also boxes that exist within a parent box (the navigation element). The hero image in your header? That’s a box. The caption underneath the image? That’s also a box, although in their case you don’t see the corners of the box — you just see the box’s content (the caption’s text). But if you were to position another element next to caption box and give it a solid background color, you’d see how both of these elements have their shapes defined by invisible boxes.
Alright, you get the point: Everything is a box. Let’s explore what that means!
Every box consists of four areas that layer atop one other. Below, they are defined beginning from their innermost area are to their outermost area:
Below is a visualization of each area. Imagine that this series of nested boxes is like a normal button element you'd see on a webpage:
Margin areaBorder areaPadding areaContent area
Notice how the padding area is still within the element. The background of the element will extend to include the padding area. In contrast, the border area and margin area extend past the point that the background color is defined. That’s a special behavior of the box model.
In addition to the dimensions of a box, the browser must also know how to display each element in relation to its nearby elements. There are four popular display types that an element can be set to using CSS (or within the Webflow designer if you're not coding by hand).
All the possible display values (block, inline-block, inline, and none) in the Webflow design tool.
Here they are:
Let’s re-iterate these key points to ensure we fully grasp the underlying concepts:
Elements with display: block are always laid out on their own line, regardless of what their width is set to. Block elements are generally large structural/content pieces such as containers, paragraphs, lists, and headings.
This is content inside of a block-level element.
Elements with display: inline can be thought of as if they were words in a paragraph. They flow inline with other inline elements. Inline elements have their width and height automatically calculated by the browser based on their inner content; you cannot set the width or the height of an inline element. Inline elements are generally smaller pieces of content that fit inside a block element — alongside other inline elements and text. Examples include links, images, and spans of text.
Elements with display: inline-block also appear inline; however, the distinction is that you can define the width, height, margins, and padding areas of an inline-block element. In general, there is no reason to opt for inline instead of inline-block, but inline is the default behavior of many elements on the web, so most designers stick with it unless they specifically need the ability to further define box areas.
Sizing elements for the web is not the same thing as sizing elements in a static design environment, such as Photoshop or Illustrator. Not only do the elements on a web page vary in dimensions depending on the size of the user’s browser window, but the position of one element can actually affect the position of nearby elements! Let’s explore this concept a bit further.
On the web, an element’s dimensions can either be sized relative to its parent element or explicitly. Here’s the difference:
A relative sizing is based on the width of the parent, e.g. an element with a width of 50% would take up 50% of the width of its parent element. If the parent width changes, the child’s width will automatically change as well!
An explicit sizing (such as a pixel value you define) is not based on the width of the parent and is completely static. It will never change — even if its parent element's dimensions change or if the browser window is resized.
It is also possible to set constraints for these two types of sizings. To do this, you specify the min and max width and/or height of an element. This is most commonly combined with relative dimensions as a way of ensuring an element doesn’t get too tall or too wide. For example, you can dictate that a box takes up 50% of its parent’s size, but not if that value exceeds 500 pixels. Thus, when a size of 500 pixels is reached, do not continue to expand.
This element is set to 50% width of its parent element.This element is set to 300px width.This element is set to 50% width of its parent element. It also has a min-width of 300px. Try resizing your browser window!
If you don’t set the width or height values of an element, its values will automatically be computed based on the content inside the element (the content area). However, remember that for block-level elements, the width defaults to 100% of the parent’s box.
CSS is the language used for defining the box model properties of web page elements. Everything we've discussed so far is defined using CSS. The actual elements themselves are defined using HTML, but that’s a topic for a different article.
As previously mentioned, these are the four most common display properties:
(Above, we first state the class name associated with the HTML element that we’re defining CSS properties for. Then, within brackets, we enumerate the box model styling properties we're interested in alongside their respective values. If this looks like complete gibberish to you, don’t worry; the implementation details of CSS are not something Webflow requires you to know. If you are in fact looking to fully learn CSS and web coding in general, then I highly suggest taking a look at this fantastic book.)
Let’s continue with our code examples. Below are examples of how the width and height dimensions would be set for an element:
Having a deeper understanding of the box model allows you to improve your design skills both in the browser and in your web mockup tool of choice (whether it’s Photoshop, Illustrator, or Webflow!) because it gives you a better understanding of how to design for how the web actually works. The closer to that reality you are, the fewer compromises will have to be made when transitioning your design work to the live production work that your customers ultimately see!
Have any questions about the technical aspects of the box model? Let us know in the comments below, and I’ll be sure to respond! Thanks for reading this far into this dry (but powerful) topic :)