Spacing
How to apply and adjust spacing within and around parts.
Last updated
Was this helpful?
How to apply and adjust spacing within and around parts.
Last updated
Was this helpful?
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.
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.
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.
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.
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.
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:
The size of the gap available is between one and ten.
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.
#margins #white space #negative space
Sizing
Alignment
Hierarchy: parents and children
