Space your blocks

This article explains where to put the spacing of a layout: the padding on the container, the margin on the block and the gap between a container’s children. A card or a section set this way stays clean when you remove, add or move a block.

Before you start

• Spacing is chosen on your site’s scale, a slider with steps. Each step shows its value, for example 16px.
• The same scale is used for padding, margin and gap. Changing the value of a step changes every block that uses it.
• The values quoted here are those of the scale shipped with Lovely Render. A design from the catalog can enlarge the large steps of your site: the reasoning stays the same.

The three spacing settings

Set a block’s spacing

1. Select the block and open the Styles tab of the inspector.
2. Open the Size & Spacing panel and scroll down to the Spacing section.
3. Under Padding, move the first slider for the top and bottom, the second for the left and right.
4. Under Margin, set the space around the block the same way. The page updates at every step.

Each axis is set with a single slider as long as its two sides are linked. The icon to the right of the slider, Unlink sides, gives each side a slider. Link sides brings them back together.

The Auto button, on the left and right margin, centers the block in its parent. Give the block a maximum width so the centering shows.

Step 0 removes the space. Padding and margin are set per state and per screen, like any setting of the Styles tab: Find your way around the editor explains the two rows.

Create or edit a step

• The New button (+), next to Padding or Margin, creates a step. It and the pencil are reserved for the site’s administrators. The form asks for its value in the Spacing field and its unit: px, em, rem or %. On every slider of the site, the step takes its place in the order of values.
• The Edit button (pencil) changes the value of the step held by the last side you set. The form reminds you Your changes will apply to every block that uses it. The pencil does not appear when that side has no step.
• A value exists only once. A step with a value already taken is refused with a message like 16px already exists. Pick that value instead. Then take that step on the slider.

A % is a share of the parent block’s width. As a gap between rows, it gives nothing: the height is not known.

The scale shipped with your site

A step keeps its name when its value changes: m stays m at 20 px. The steps shipped can be edited but not deleted. The CSS variable is used to Add advanced CSS.

Choose multiples of 8

Steps of 8 px and more are multiples of 8. The steps of 2 and 4 px are fractions of it.

• 16 px is the default text size of browsers. A 16 px spacing reads as a natural pause between two ideas.
• A multiple of 8 divides with no remainder: 16 divides into 8 then into 4. Half of 15 falls between two pixels: two blocks that should line up shift by one pixel.
• A multiple of 8 stays whole on a high-density screen, which multiplies pixels by 1.5 or 2.

To give more room, go to the next step rather than a value in between.

Put the spacing on the right block

Each block carries the spacing that concerns it. The container carries its padding, the space between its edge and its content. The block carries its margin, the space that separates it from its neighbors.

For example, a card with 16 px of padding contains a paragraph with a 16 px margin. The text is 32 px from the edge. If you remove the paragraph, the card keeps its 16 px and stays clean.

The same principle applies to a series of blocks. In a post card, the heading, the date line and the excerpt each carry their own margin. You remove the date without touching the rest: its spacing leaves with it.

Duplicated and then stripped of its heading, a card set this way stays right.

Space the children of a container

1. Select a Flex or Grid container.
2. In the Settings tab, open the Flex layout or Grid layout panel.
3. Under Gap, set the first slider for the space between columns and the second for the space between rows.

The icon to the right of Gap, Custom per device, sets the gap in each screen tab of the panel.

The gap combines with the other two settings. Padding sets the space with the container’s edge and the gap the space between the children. A child’s margin is added and leaves with it.

Apply the Spaced style

To space a row or a grid without setting the gap each time, apply the Spaced style to it.

1. Select the container and open the Styles tab.
2. In the Styles list, click Spaced.

The style sets a gap of step s, 8 px on the scale shipped, between the children. It touches neither padding nor margin.

No block carries this style by default: a new container has no gap. To widen the gap of all the blocks that carry Spaced, change it on one of them then update the style. Save a block’s style explains the update.

The style of blocks that lay out elements gives them a gap.

Elements that go together are closer than those that read apart: a field’s label is 8 px from its input area, the next field 16 px.

Give a design more air

An airy design gives air to its sections and groups: wider padding on sections and a larger gap between cards. Enlarging the space around every paragraph scatters the text, moves a heading away from its text and swells every card.

The rhythms of the design catalog follow this rule. A more airy rhythm enlarges the large steps, those of sections and of gaps between groups. The small steps stay the same. Adopt a design from the catalog presents the rhythms.

Space paragraphs

A paragraph has no margin. Each browser gives elements its own margins: the site resets them all to zero so that a page displays the same way everywhere. The space around a paragraph therefore comes from its container, through its gap or padding, or from a margin you set.

• For one paragraph, set its Margin in the Size & Spacing panel.
• For all the children of a container, give the container a Gap or apply the Spaced style to it.
• For spacing to reuse across several pages, save a style and apply it to the paragraphs.

A paragraph inherits its font, size and color from the page. Format text explains the page’s base size.

See also

• Set size, borders and effects
• Container
• Save a block’s style
• Style text