Spacing
Discover the classes used for spacing
Spacing
Spacing in web design refers to the deliberate use of empty space around elements to create a clean, organized layout. Two key properties that control spacing are padding and margin.
In a nutshell, padding is the spacing within the div, while margin is outside the div.
Most spacing is actually set by the layout. This is part of the grid and flex gap. In case additional padding is needed, this can be set by the padding_ and margin_ classes.
If two divs are stacked and both have a margin, only the biggest margin will apply.
While if padding is added, these will add to each other.
Padding
Padding is the space between the content of an element and its border, essentially creating an inner cushion that keeps the content away from the edges of the element.
Try it!
Below you have a Layout - Grid component. Try adding padding_v-large to the Spacing custom class.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Class structure
padding_v-[size]
padding_h-[size]
padding_top-[size]
padding_bottom-[size]
Available classes
.padding_v-large
.padding_v-medium
.padding_v-small
.padding_h-large
.padding_h-medium
.padding_h-small
.padding_top-large
.padding_top-medium
.padding_top-small
.padding_top-tiny
.padding_bottom-large
.padding_bottom-medium
.padding_bottom-small
.padding_bottom-tiny
Margin
Margin is the space outside the element's border, defining how far the element should be from surrounding elements.
Try it!
Below you have a L -- Main component. Try adding margin_v-large to the Spacing custom class.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Class structure
margin_top-[size]
margin_bottom-[size]
Available classes
.margin_top-large
.margin_top-medium
.margin_top-small
.margin_top-tiny
.margin_bottom-large
.margin_bottom-medium
.margin_bottom-small
.margin_bottom-tiny
Custom Classes Overview
See all available classes to be entered in "Spacing" Custom Classes.
Padding
padding_v-[size]
padding_h-[size]
padding_top-[size]
padding_bottom-[size]
Available classes
.padding_v-large
.padding_v-medium
.padding_v-small
.padding_h-large
.padding_h-medium
.padding_h-small
.padding_top-large
.padding_top-medium
.padding_top-small
.padding_top-tiny
.padding_bottom-large
.padding_bottom-medium
.padding_bottom-small
.padding_bottom-tiny
Margin
margin_top-[size]
margin_bottom-[size]
Available classes
.margin_top-large
.margin_top-medium
.margin_top-small
.margin_top-tiny
.margin_bottom-large
.margin_bottom-medium
.margin_bottom-small
.margin_bottom-tiny
Next up!
See the various Comps components you can use.
