Spacing — margin & padding

If your page feels cramped or messy, the fix is almost always spacing. Learning margin and padding will do more for your designs than any other styling skill. They live in the Spacing sector of the Customize tab.

The box model (the one diagram to understand)

Every element on a page is a box with four layers, from the inside out:

1. Content — the text or image itself.
2. Padding — space inside the box, between the content and the box's edge.
3. Border — an optional line around the box (see Borders & corners).
4. Margin — space outside the box, between this box and its neighbors.

That's the whole model. The two you'll adjust constantly are padding (inner space) and margin (outer space).

Padding — inner space

Padding pushes an element's content away from its own edges. It's what gives a button breathing room around its label, or stops text from touching the edge of a colored card.

• More padding on a section = a more spacious, premium feel.
• Padding lives inside the background color, so increasing it makes a colored box bigger.

Margin — outer space

Margin is the gap between an element and the things around it. Use it to separate a heading from the paragraph below it, or to add room between two cards.

• Margin is invisible — it's just empty space.
• Margin sits outside the background color, so it never changes the element's own color area.

Quick way to remember it: padding is the stuffing inside a jacket; margin is the personal space around the person wearing it.

Setting spacing in Webpress

In the Spacing sector you'll see a visual box-model control with two rings:

• the outer ring is Margin,
• the inner ring is Padding.

Each has four inputs — top, right, bottom, left — so you can set each side independently, or set them all together. Type a number (with a unit like px) into a side, or drag to adjust. For what px, %, and rem mean, see Sizing & units.

Adjusting on the canvas

When an element is selected, you can also drag its spacing handles directly on the canvas to add or remove padding and margin visually — often faster than typing numbers. (This direct-drag editing is part of the layout tools.)

Common spacing patterns

• Section padding: generous top/bottom padding (e.g. 64–96px) gives sections room and rhythm.
• Stacked elements: add bottom margin to a heading to separate it from the text under it.
• Consistency: reuse the same handful of spacing values (say 8, 16, 24, 48px) across the site so everything feels deliberate.

Where to go next

• Sizing & units — how wide and tall, and what the units mean.
• Layout: flexbox & grid — spacing between many items at once with gaps.