Learn about the box model and how it shapes the web.
Everything on the web is structured using the box model. HTML elements (e.g., paragraphs, divs, sections, etc.) are expressed as boxes. These elements can be stacked vertically, arranged horizontally, or nested inside one another to create the structure of a webpage.
How the web uses boxes
All HTML elements are expressed in boxes on the web. You can imagine an invisible boundary around each element — forming a box. These invisible boxes can be styled to create website layouts (e.g., adding space or borders around an element’s box). Depending on their properties, these boxes can sit next to each other, stack on top of each other, or nest inside each another.
How to use boxes for responsive design
Web content isn’t like a slideshow presentation, where elements can be manually positioned anywhere. Slideshow presentations are created to be viewed at a single size and orientation and aren’t responsive to different screen sizes or orientations.
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 different devices and screen sizes.
How to nest boxes
An important aspect of the box model is that it allows you to put boxes inside other boxes (i.e., “nest” boxes). This organizes and adds flexibility to your design by creating element hierarchy.
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, making them child elements of the container. The parent container groups these elements together and if you move the container, all the boxes inside it move too.
How to style boxes
You can use CSS (Cascading Style Sheets) to style boxes (i.e., elements). CSS gives you control over various aspects of their styling, such as size, color, borders, and spacing. This flexibility allows you to create visually appealing, functional designs.
Spacing and sizing of 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 overall height of the heading and paragraph elements.
You can create spacing between and within elements using 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 “child” elements).
How to change box layouts
You may want to change the layout of elements on your site, e.g., to distribute them horizontally or position them 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.