Understanding Spacing Options in ProSite

When an element is placed onto the webste you can apply spacing to it to adjust the spacing of that object.

When you click an element, you'll find Spacing options in the right side menu.

There are two types of spacing options - Padding, and Margin.

These can be adjusted uniformly around an element, or each side can be adjusted independently. To set uniformly you can select the Use same values checkbox.

What's the difference between padding and margin?

The following image shoes the difference between padding and margin.

Padding: This inserts spacing inside the element.

Margin: This inserts spacing around the element.

Padding is measured in pixels, which is a pre-determined unit of measurement used for website distancing.

When should I use padding and when should I use margin?

There is no hard and fast rule. However in general:

On elements, such as text, images, you would typically use margin, and rarely use padding. A notable exception would be a button element which would typically always have padding.

On layouts, you'd mostly use padding, and more rarely use margin.

The following shows you an example of a typical website layout, demonstrating how padding and margins can used. 

Practical examples

Let's look at some examples of where you might use padding and margin.

Here we have a button with no Padding at all. This button has an automatic height, and so there is also no pre-defined height to it. 

The text is aligned closely to the edge of the button.

Lets add some padding to it. 

Here the button has a padding of 20px on the top and bottom, and 50px to the left and right.

Here's how this looks in our spacing options:

We can also see the padding in the editor view:

Now lets say we wish to duplicate this button and have a secondary button.

As these buttons have no margin, they are sitting alongside one another.

We can add a small margin of 10px to these buttons to increase the distance around the outside of them.

Now the buttons are spaced apart. They're spaced apart by 20px as the margin on each of them pushes them out from one another.

Let's check how things look on mobile view.

Our containing layout is set to switch to a vertical layout on mobile view, which has meant that these buttons now stack on top of one another.

As we didn't add top or bottom margin yet, this means that they are stacked directly on top of one another.

We can fix this by adding a 10px margin to the top and bottom of the button.

Now the buttons are nicely spaced out on mobile too:

Note in the Spacing options above there are also "Scale Factors". This can increase or reduce the size of the padding on margins on different devices. Often you may want to reduce some of your padding/margin for smaller displays. 

In the above case, the scaling was set to 80%. This means that the padding and margin on mobile devices is 80% of what it is set to in the editor.

Let's look at another example.

Here we've created a nested structure of Layouts. The central layout has a semi-transparent background and contains some text.

The text is filling to the width of the Layout.

In this adjusted layout, we have added 50px of padding to the Layout with the transparent background. We've also added 30px of bottom margin to the header text.

This has pushed all of the text 50px in from the containing box, and there is now a 30px gap between the header text and the body text.