The box model

The box model in web design describes how elements stack and flow on a page, including the spacing around them. There are a few key things to know about the box model:

1. Everything on the web is made up of boxes of content, positioned next to or stacked on top of each other based on the spacing properties we set.
2. The boxes flow from left to right and top to bottom, like text in a document, and respond and reflow when they hit the edge — similar to how text wraps.
3. We can control how the boxes align and behave by setting style properties like display, padding, margin, and borders.

Display settings & options

Block

Elements set to block display stack vertically and take up the full width of their parent by default. Use block when you want elements to appear in a vertical flow — each starting on a new line and pushing the next one down.

For example, if you set a hero section to block and add a heading, paragraph, and button, each one appears on a new line, stacked top to bottom.

Layout behavior

• Block elements stack vertically
• They take up the full width of the parent by default
• You can manually set a width and height in the Style panel

Flex

Flex (flexbox) lays out children in a single direction — horizontal (row) or vertical (column). It’s ideal for layouts where you need control over spacing, alignment, and order, but don’t need a full two-dimensional grid.

For example, you might use flex in a pricing section to align three cards side-by-side and space them evenly.

Layout behavior

• Apply to the parent; it controls the layout of direct children
• Set direction (row or column), alignment, and spacing in the Style panel
• Children can override certain settings like alignment or order

Grid

Grid divides a parent container into rows and columns, allowing for precise two-dimensional layouts. Use it when you need both horizontal and vertical structure — especially for more complex designs.

For example, you might use a 2-column grid for an image and text. On smaller screens, you can reduce it to a single column for better readability.

Layout behavior

• Set grid on the parent; children snap to cells
• Rows and columns can auto-adjust to fit content
• Wrap multiple items in a Div block to place them in a single cell
• Elements can span multiple rows or columns
• Changing the number of rows or columns doesn’t remove content — just rearranges it

You’ll often use different layouts together. For example, you might use block for the overall page structure, grid for a section layout, and flex to align content inside a grid cell.

None

None removes an element from the page layout entirely. It won’t display, take up space, or be read by screen readers. Use it when you want to hide something temporarily — for example, as part of an interaction.

For example, you might set a dropdown menu to display: none until a user clicks a toggle to open it.

Layout behavior

• The element is removed from layout and accessibility
• Still visible in the Navigator and included in site code
• Commonly used in show/hide interactions
• Different from opacity: 0%, which hides the element visually but keeps it in the layout

Inline displays

Inline display types are useful when elements should flow with surrounding text — for example, icons or short UI elements that appear alongside content rather than on a new line.

• Inline-block - Behaves like inline but allows width, height, margin, and padding to be set; great for buttons, badges, or links that need custom sizing in a row
• Inline-flex - Keeps the parent inline while applying flex layout to its children; useful for aligning an icon and text inside a label or paragraph without breaking flow
• Inline-grid - Like inline-flex, but uses grid layout for children instead of flex; ideal for small, structured groups of elements within text — like an icon and two stacked labels
• Inline - The default for spans, links, and text elements; doesn’t support properties like width or height, but flows naturally with surrounding text

Layout depends on hierarchy

Remember, layout behaviors like Flexbox and Grid apply to child elements inside a parent. For example, if you set a container (parent) to flex, that affects how its nested elements (like headings and buttons) align and space themselves. 

It’s important to remember that layout often starts with the parent.

You got this.

Click Complete & continue in the Course progress box on the right to move on and start wrapping things up.