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.

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.

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”.

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.

Changing Spacing in a Column

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

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

How to Access a Column’s Style Dot

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

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.

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

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.

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

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.

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 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.

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!