MASTORSCDN MARGIN DOCUMENTATION

Welcome to the MastorsCDN Margin Utility Classes documentation. These classes provide a flexible system for applying margins to HTML elements using consistent naming conventions. Explore the sections below for previews, class names, and usage examples across various margin types including auto, states, fixed sizes, and rem units (positive and negative).

Preview Class Name Description HTML Declaration Copy
Auto Margins
Apply automatic margins to center elements or manage spacing dynamically.
Auto
 .m-auto, .mar-auto, .margin-auto Sets all margins to auto, typically used for centering. 
<div class="m-auto">Auto</div>
Left Auto
 .m-l-auto, .mar-l-auto, .m-left-auto Sets left margin to auto, useful for right-aligning. 
<div class="m-l-auto">Left Auto</div>
State Margins
Use special state values like inherit or auto for margin properties.
Inherit Top
 .m-t-inherit, .mar-t-inherit, .m-top-inherit Sets top margin to inherit from parent element. 
<div class="m-t-inherit">Inherit Top</div>
Auto Right
 .m-r-auto, .mar-r-auto, .m-right-auto Sets right margin to auto. 
<div class="m-r-auto">Auto Right</div>
Fixed Size Margins
Apply predefined margin sizes: xs (0.25rem) and xl (2rem).
XS Top
 .m-t-xs, .mar-t-xs, .m-top-xs Sets top margin to 0.25rem (extra small). 
<div class="m-t-xs">XS Top</div>
XL Bottom
 .m-b-xl, .mar-b-xl, .m-bottom-xl Sets bottom margin to 2rem (extra large). 
<div class="m-b-xl">XL Bottom</div>
Rem Margins
Apply precise margins in rem units (0 to 30.9rem) for consistent spacing across devices.
1.5rem Top
 .m-t-15, .mar-t-15, .m-top-15 Sets top margin to 1.5rem. 
<div class="m-t-15">1.5rem Top</div>
5rem TB
 .m-tb-50, .m-bt-50, .mar-tb-50 Sets top and bottom margins to 5rem. 
<div class="m-tb-50">5rem TB</div>
13.1rem TR
 .m-tr-131, .m-rt-131, .mar-tr-131 Sets top and right margins to 13.1rem. 
<div class="m-tr-131">13.1rem TR</div>
3.5rem TRB
 .m-trb-35, .m-tbr-35, .m-rbt-35, .m-rtb-35, .m-btr-35, .m-brt-35 Sets top, right, and bottom margins to 3.5rem. 
<div class="m-trb-35">3.5rem TRB</div>
10rem All
 .m-100, .m-all-100 Sets all margins to 10rem. 
<div class="m-100">10rem All</div>
Negative Rem Margins
Apply negative margins in rem units (0 to -10.9rem) to overlap or reduce spacing.
-2rem Top
 .m-t--20, .mar-t--20, .m-top--20 Sets top margin to -2rem. 
<div class="m-t--20">-2rem Top</div>
-5.5rem RL
 .m-rl--55, .m-lr--55, .mar-rl--55 Sets right and left margins to -5.5rem. 
<div class="m-rl--55">-5.5rem RL</div>
-1.5rem TLR
 .m-tlr--15, .m-trl--15, .m-lrt--15, .m-ltr--15, .m-rtl--15, .m-rlt--15 Sets top, left, and right margins to -1.5rem. 
<div class="m-tlr--15">-1.5rem TLR</div>
-10.9rem BRL
 .m-brl--109, .m-blr--109, .m-rlb--109, .m-rbl--109, .m-lbr--109, .m-lrb--109 Sets bottom, right, and left margins to -10.9rem. 
<div class="m-brl--109">-10.9rem BRL</div>