Spacing

How to apply and adjust spacing within and around parts.

Why is Spacing Important?

The spacing of your content can significantly impact user experience and overall aesthetics. It's more than just a matter of visual appeal - proper spacing ensures clarity, readability, and navigational ease for your readers.

Most parts in Appeggio have a Spacing Editor which allows you to apply margins and padding. Some parts, such as rows and cards, also can apply gaps within parts.

What is A Margin?

A margin adds space to a part outside of any defined borders. This can be applied to all, horizontal, vertical, top, right, bottom, and left.

Margins can be used to create a frame around the part's content so that the part does not run to the edges, making the page look cleaner and the parts more visually appealing. The range available for margins goes from -30 (a negative margin) up to 30.

What is Padding?

Padding adds space around a part’s content inside of any defined borders. Padding can be applied to all of the part, horizontal, vertical, top, right, bottom, and left. The range available for padding goes from 1 to 30.

How to Adjust the Margin and Padding

The margin and padding options are in the right menu under Spacing. Select the part you want to apply spacing to, and then click on the spacing option; here, you can toggle between margin and padding and adjust the spacing of parts.

In the example below, there are two cards, each in a colored column. The card on the left has a margin 'all' of 8 applied. This creates space outside of the card. The card on the right has padding 'all' of 8 applied, creating space around the content within the card.

Example - Margin Applied to the Left Card, Padding Applied to the Right Card

Negative Margins

Negative margins can introduce a dynamic dimension to layouts by challenging the conventional boundaries of spacing. While traditional margins create space around an element, negative margins defy this norm by pulling adjacent elements closer, overlapping, or even breaking free from their containers.

Applying Negative Margin At Different Breakpoints

Applying Gaps

Some parts, such as rows and cards, have a spacing option called 'Gaps'. This allows for spacing to be applied to the child parts. In the example below, there is a row containing two cards. When a gap is applied to the row, the cards are separated by a gap. When a gap is applied to the card on the left, the contents of the card are all separated by a gap:

Applying a Gap to a Row, and then to a Card

The size of the gap available is between one and ten.

Changing the Spacing On Different Breakpoints

When you open the Spacing Editor, you will notice that margins and padding can be applied differently across screen sizes. Toggling between these breakpoint options will allow you to change the spacing across various breakpoints. For example, you may want 10 pixels of margin on top of a button on mobile but 30 on desktop. You can toggle between breakpoints and preview how this looks by clicking the relevant breakpoint on the top menu.

Applying Negative Margin to Move Parts Up or Down, and to Overlap

Related Information

Sizing

Alignment

Hierarchy: parents and children

#margins #white space #negative space