How to Modify Spacing and Margins Around Content

This article will guide you through the process of editing the spacing and margins of your apps and blocks with the help of Style Dots. The guide covers the following:

• Which Style Dots to Use
• Top and Bottom Spacing 
• Changing Spacing in a Column
• Margins

Which Style Dots to Use

Hover over the part of your layout where you'd like to adjust spacing or a margin. 

When you mouse over a dot, your pointer changes into a paint brush.

Top and Bottom Spacing

Once you click a style dot for an app, you will see an editing window like the one below. We are interested in the “Top Spacing” and “Bottom Spacing”.

Adjust the slider for Top Spacing or Bottom Spacing to increase/decrease the space. You can also enter a number in the field adjacent to the spacing options to change the spacing. 

Changing Spacing in a Column

Let’s start with the following column, which contains 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. The next image shows the options for a column.

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 (see example). 

Notice how some space is added to the top of the column, pushing the app down (green arrow).

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 in the image below. Notice the black border outlining the column when hovering over a style dot for 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! You may also find the following tutorials helpful:

• Customize Layout Design
  
• Changing Column Size

If you get stuck, or have any further questions or comments, please get in touch.