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-topmb-{n}- Sets margin-bottomml-{n}- Sets margin-leftmr-{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:
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)*-1through*-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.
We're continually improving the Trongate documentation. If anything is incorrect, unclear, incomplete, or could be better, we'd genuinely appreciate your input.
Share your thoughts in the Documentation Feedback.