Layout fundamentals

Before diving into Flexbox and Grid, you need to understand how browsers lay out elements by default. Every HTML element has a display value that controls whether it stacks vertically, flows with text, or disappears entirely.

Normal document flow

Without any CSS overrides, browsers render elements in normal flow. There are two kinds of flow behavior:

• Block-level elements stack vertically, each on its own line, and stretch to fill the full width of their parent.
• Inline elements flow horizontally with the surrounding text and wrap to the next line when they run out of space.

The four core display values

display: block Block elements always start on a new line and take up the full available width. Common block elements: <div>, <p>, <h1>–<h6>, <section>, <article>. You can set explicit width, height, margin, and padding on block elements.

display: inline Inline elements sit inside text runs and flow with them. Common inline elements: <span>, <a>, <strong>, <em>. Setting width or height on a pure inline element has no effect — the element sizes itself to its content only.

display: inline-block A hybrid: the element flows with surrounding text like an inline element, but it respects width, height, top/bottom margin, and padding like a block element. Useful for buttons and tags that sit inside paragraphs but need controlled dimensions.

display: none Removes the element from the layout entirely. It takes up no space and is invisible. Different from visibility: hidden, which hides the element but preserves its space.

Changing display mode in Site Designer

1. Select any element on the canvas.
2. Open the Style pane on the right panel.
3. Locate the Display dropdown at the top of the Layout section.
4. Choose block, inline, inline-block, none, flex, or grid from the list.

When to change display mode

Most of the time you leave elements at their default display value. Switch when you need to:

• Turn a <span> into a badge with defined dimensions → use inline-block.
• Temporarily hide an element during design → use none (or use a toggle in the Layers panel).
• Prepare a container for Flexbox or Grid — those are just special values of the display property.

Quick reference