Ask a Question ?
Design & Publish Websites Faster

Changing the Spacing and Margins on the Page

Updates!

We have released the Bulk Style Editor on our website editor. With it you can edit the styling, like spacing and margins, of multiple items (apps, text, containers, etc) at the same time and from a single panel! Check it out, it will help you design faster.

Also, we’ve released Design Mode options, to hide layout controls when you’re not using them. It helps to keep your interface less cluttered and also with speed!

How to Modify Web Page Spacing and Margins

This article will guide you through the process of editing the spacing and margins of your apps and blocks (previously known as containers). This is achieved using the styling dots.

The Quick Guide

Click on a styling dot and scroll to the spacing/margin options and adjust them by dragging their sliders, or entering a number on the column on the right. This quick video will show you how.

The Detailed Steps

When you hover over certain parts of your layout, you will notice that the style dots appear, among other things. The style dots are those little balloon-shaped points, that are located near and around the top left corner area of your apps and blocks, and you can use them to edit a number of design options, such as margins and spacing.

Style dots for customizing design of apps and s

To open the edit panel, just click on any of them. You’ll notice that when you mouse over a dot, your pointer changes into a paint brush.

Icon changes to a paint brush to edit a dot

Top and Bottom Spacing

Once you click it, you will see a modal window like the one below. We are interested in the “Top Spacing” and “Bottom Spacing”.

These are some of the options available from the style dot

The following is a sample of the styling dot options of a whole row (). The ones you should focus are, as above, top and bottom spacing.

Style dot row options

Changing Spacing in a Column

The next image shows the options for a column. Let’s play a little bit with the spacing.

Style dot column options

Let’s start with the following column, that has only a Text app.

A column with 0 spacing

How to Access a Column’s Style Dot

Locate the dot for the column, on the top of it.

Column style dot

You can identify the dot element that you are about to edit, by hovering over it. When you do so, a black outline reveals the area that is affected by that dot.

Hovering over a column dot

Click it and open the options. Notice that the spacing values are set to 0 (no spacing).

Options shown for the column dot we want to edit

Top and Bottom Spacing for a Column

First, we’ll add spacing to the top. Drag the slider to the right or enter a number manually. The maximum spacing you can add here is 50. Let’s make it 50. Notice how some space is added to the top of the column, pushing the app down.

Before and after: adding 50 pixel to the top spacing

Now let’s do the same with the bottom spacing. The space is added below, and everything that comes after the column pushed down.

Before and after: adding 50 pixel to the bottom spacing

Left/right Spacing for a Column

Now, a trickier one: left/right spacing. This option modifies the spacing on both sides of the column at the same time. Let’s look at an example. We start with 0 pixels of spacing for this option. Notice the black border outlining the column.

0 pixel for left/right spacing

Now, with 50 pixel set for the left/right spacing on the column, the apps inside it are pushed 50 pixels away from the left and right edges, like in the image below. Compare it to the one above.

50 pixels set for the left and right spacing

50 pixels are added to both left and right sides.

So depending on the dot you are editing, spacing may be applied to only an app, column, section, or the whole block. Click on different dots to edit their respective spacing.

Margins

Regarding margins, they can only be applied to apps, and they’re basically the same as spacing or padding. The difference is explained in the following image.

Difference between margin and spacing

So in order to achieve different specific layouts, you may need to toy around with the spacing and margins of your apps and blocks. Don’t be afraid to experiment!

Have questions or comments about this how-to? Let us know in the comments area below!

Menu