[[TOC]]

When to use it:

• When you require to add same spacing to all elements inside a certain div
• When working with Webflow components, if you wish to hide certain elements without maintaining their wrapper
• For creating equal spacing between elements without the need for additional wrapper elements or manual spacing adjustments.

When it cannot be used:

• When all elements require different space gaps between each other

#Wrappers

• Wrappers have been defined and are ready to be used

Wrappers are a layout element that helps separate basic or complex elements from each other.

When to use it:

• No parent divs, flexbox or grids that define separation
• Sequential elements not properly separated and that will require different spacings
• When all elements require different space gaps between each other

When it cannot be used:

• When any of the wrappers has the correct spacing required
• There is already a Div, Flexbox or Grid already defining separation
• When you require to add same spacing to all elements inside a certain div
• When working with Webflow components, if you wish to hide certain elements without maintaining their wrapper

Classes that can be used for this purpose are:

Class	variable assigned
c-wrapper-2xs	size-separation-2xs
c-wrapper-xs	size-separation-xs
c-wrapper-s	size-separation-s
c-wrapper-m	size-separation-m
c-wrapper-l	size-separation-l
c-wrapper-xl	size-separation-xl
c-wrapper-2xl	size-separation-2xl