Margins

Base Foundry stack

Allows you to set margin and padding around page elements for dynamic layouts. You can be set different sizes for each breakpoint.

  • Enable margins and padding at each breakpoint
  • Set general margins and padding or fine tune each with detailed settings

Example

There are no examples for the Margins stack. Since it is used to control the layout of other content there is not a good way to provide an example. That being said, the Margin stack is one of the most versatile stacks in Foundry. Check out some of the free pre-built projects to see it in action.

Using Margins

The Margins stack contains a drop zone for other content. You may place any stack you like in this drop zone. The margins and padding settings for this stack get applied around this drop zone's content, adjusting at each of the different responsive breakpoints.

This allows for very unique layout opportunities, letting you adjust the spacing and design of a page at each of the three breakpoints.

Mobile, Tablet & Desktop

Mobile, Tablet & Desktop Breakpoint
You can choose at which breakpoints you wish to have your custom margins and padding settings enabled.

Margins
Each breakpoint allows you to set a universal margin. This applies the same margin value to the outside of the whole Margins stack. If you need more granular control over the margin settings you can opt to use the Detailed Margins setting for any of the different breakpoints, which allows you to set a different margin value for each of the sides.

Padding
Each breakpoint also allows you to set a padding value that will be applied to the entire inside of Margins stack. If you need more granular control over the padding settings you can opt to use the Detailed Padding setting for any of the different breakpoints, which allows you to set a different padding value for each of the sides.

Custom Units v2
When using the detailed settings for either Margin and / or Padding you can choose the units you wish to use for each of the detailed values. You can choose from Pixels (px), View Height (vh), View Width (vw), Percentage (%) or EMs (em).

Insight
Keep 'em separated

Padding and margins are a great way to space out your content. The Margins stack allows you to fine tune that spacing for each of the three responsive breakpoints.