🤔 Understanding Margins in Web Design
Margin refers to the space between an element's border and adjacent elements within a design. Margin can be applied on all four sides of any element in Amped. Creating proper margins helps in creating clear separations between elements, contributing to a more organized and accessible user experience.
📐 Adding Margin in Amped
To add margin to an element using Amped, follow these simple steps:
Open an Element's Margin Tab: Start by selecting the layer of the element you wish to modify, then open the margin tab, located on the right-side properties panel.
Choose Margin Type: Within the margin section, you’ll find a dropdown menu where you can choose how to apply the margin.
You have two options:
All Sides: Selecting this option allows you to apply the same margin value uniformly to the top, bottom, left, and right sides of the element. This is useful for consistent spacing around an element.
Individual: If you need different margin sizes on different sides of the element, choose this option. It lets you set distinct margin values for each side, or add a margin to just one or more sides selectively.
In this example, 16px of margin is applied only on the TOP of the text, giving it some space from the headline text.
🤨 Want even more margin on desktop?
Click into the desktop viewport and increase the assigned margin value. Notice the change in the appearance of the panel and that you are now creating a property that is overriding the values applied to the mobile design.This will not affect the mobile design, only any viewport this current size or larger.
