Spacing utilities

Mytril provides a set of spacing properties that allow you to easily control the margin, padding, and gap of elements using simple CSS classes. These property are flexible and can be applied across different breakpoints, making layout adjustments straightforward and efficient.

Use the controls above to try out the different spacing helpers.

How to use spacing classes

The spacing classes in Mytril follow a consistent naming convention: {property}{direction}-{size}. Here’s a breakdown:

The property applies the type of spacing:

m - applies margin
p - applies padding
g - applies gap

The direction designates the side the property applies to:

t - applies the spacing for margin-top and padding-top
b - applies the spacing for margin-bottom and padding-bottom
l - applies the spacing for margin-left and padding-left
r - applies the spacing for margin-right, padding-right, and row-gap
x - applies the spacing for margin and padding -left and -right
y - applies the spacing for margin and padding -top and -bottom
a - applies the spacing for margin, padding and gap in all directions

Available sizes

The size defines the spacing amount and is expressed in rem units. Here’s a list of available sizes:

Class	Properties
0	0px
1	0.25rem
2	0.5rem
3	0.75rem
4	1rem
5	1.25rem
6	1.5rem
7	1.75rem
8	2rem
9	2.25rem
10	2.5rem
11	2.75rem
12	3rem
14	3.5rem
16	4rem
20	5rem
24	6rem
28	7rem
32	8rem
36	9rem
40	10rem
44	11rem
48	12rem
52	13rem
56	14rem
60	15rem
64	16rem
72	18rem
80	20rem
96	24rem
px	1px
0.5	0.125rem
1.5	0.375rem
2.5	0.625rem
3.5	0.875rem

Example usage

To apply margin or padding, you can combine the property, direction, and size to target specific elements.

<div class="p-4 m-2">
	<!-- This div has padding of 1rem and margin of 0.5rem -->
	Content
</div>

This would apply 1rem of padding on all sides and 0.5rem of margin.

Breakpoints for responsive spacing

Mytril also supports responsive spacing, allowing you to adjust spacing at specific screen sizes using breakpoints. The format is: {breakpoint}:{property}-{direction}-{size}.

Breakpoints:

sm - Small (640px and up)
md - Medium (768px and up)
lg - Large (1024px and up)
xl - Extra-large (1280px and up)
xxl - Extra-extra-large (1536px and up)

For example:

<div class="md:mx-4 lg:px-2">
	<!-- Applies 1rem horizontal margin at medium screens, and 0.5rem padding at large screens -->
	Responsive content
</div>

Advanced usage: custom spacing with Root variables

In addition to the predefined classes, developers can also leverage CSS root variables for more granular control over spacing values.

.custom-class {
	padding: var(--spacing-4);
	margin: var(--spacing-2);
}

This provides even more flexibility in tailoring your layouts.

Summary of spacing classes

m-{size}: Margin on all sides
p-{size}: Padding on all sides
g-{size}: Gap for flexbox or grid layouts
t, b, l, r, x, y, a: Directional modifiers for top, bottom, left, right, horizontal, vertical, and all sides.

By using Mytril’s spacing properties, you can create highly customizable, responsive layouts with minimal effort.