Margin Utilities

Trongate CSS provides utility classes for controlling margins. These classes follow a simple naming convention where the first letter indicates the margin direction (t, b, l, r for top, bottom, left, right) and the number indicates the size in em units.

Margin Direction Classes

There are four types of margin utilities available:

mt-{n} - Sets margin-top
mb-{n} - Sets margin-bottom
ml-{n} - Sets margin-left
mr-{n} - Sets margin-right

Where {n} can be 0 through 7, representing the size in em units.

Top and Bottom Margins

Here's a demonstration of top margin (mt-) and bottom margin (mb-) utilities:

Default spacing

mt-3 adds 3em top margin

mt-5 adds 5em top margin

Left and Right Margins

Here's how to use left margin (ml-) and right margin (mr-) utilities:

Common Use Cases

Margin utilities are particularly useful for:

Blog Post Example

This paragraph has a 2em bottom margin.

Subheading with 1em bottom margin

Another paragraph with 3em bottom margin.

Available Sizes

Each margin utility class is available in these sizes:

*-0 - Removes margin (sets to 0)
*-1 through *-7 - Sets margin to 1em through 7em respectively

Removing Margins

Use the zero value to remove margins when needed:

Margin utilities can be combined to control spacing in multiple directions. For example, mt-2 mb-3 ml-1 would set different margins for top, bottom, and left respectively.