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