Margin

Syntax

Class
Properties
m-{value}
margin: {value};
mx-{value}
margin-left: {value};
margin-right: {value};
my-{value}
margin-top: {value};
margin-bottom: {value};
mt-{value}
margin-top: {value};
mr-{value}
margin-right: {value};
mb-{value}
margin-bottom: {value};
ml-{value}
margin-left: {value};

Parameters

value
<length-percentage default-unit=1px>
value
auto

Margin is outside the element so to demonstrate it we put it on the inner div in this example.

<div class="t1 bg-c-white shadow-4"> <div class="t1 w-96 h-96 bg-c-blue-500-50 m-16"></div> </div>

mx-auto can be used for centering block, flex, grid and table elements with an intrinsic size. The div element is block by default.

<div class="t1 w-full bg-c-white shadow-4"> <div class="t1 w-96 h-96 bg-c-blue-500-50 mx-auto"></div> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Passing argument of type number.
t1 m-1
.t1.m-1 { margin: 1px; }
Passing argument of type number with fraction.
t1 m-1.5
.t1.m-1\.5 { margin: 1.5px; }
Passing negative argument of type number, prefix form.
t1 -m-1
.t1.-m-1 { margin: -1px; }
Passing negative argument of type number, infix form.
t1 m--1
.t1.m--1 { margin: -1px; }
Passing argument of type length.
t1 m-1em
.t1.m-1em { margin: 1em; }
Passing argument of type length with fraction.
t1 m-1.5em
.t1.m-1\.5em { margin: 1.5em; }
Passing negative argument of type length with fraction, prefix form.
t1 -m-1.5em
.t1.-m-1\.5em { margin: -1.5em; }
Passing negative argument of type length with fraction, infix form.
t1 m--1.5em
.t1.m--1\.5em { margin: -1.5em; }
Passing argument of type percentage.
t1 m-2%
.t1.m-2\% { margin: 2%; }
Passing argument of type percentage, with fraction.
t1 m-33.33%
.t1.m-33\.33\% { margin: 33.33%; }
Passing negative argument of type percentage, prefix form.
t1 -m-2%
.t1.-m-2\% { margin: -2%; }
Passing negative argument of type percentage, infix form.
t1 m--2%
.t1.m--2\% { margin: -2%; }
Passing argument auto.
t1 m-auto
.t1.m-auto { margin: auto; }
Utility function mx-
t1 mx-2
.t1.mx-2 { margin-left: 2px; margin-right: 2px; }
Utility function my-
t1 my-2
.t1.my-2 { margin-top: 2px; margin-bottom: 2px; }
Utility function mt-
t1 mt-2
.t1.mt-2 { margin-top: 2px; }
Utility function mr-
t1 mr-2
.t1.mr-2 { margin-right: 2px; }
Utility function mb-
t1 mb-2
.t1.mb-2 { margin-bottom: 2px; }
Utility function ml-
t1 ml-2
.t1.ml-2 { margin-left: 2px; }
Invalid number of arguments
t1 m-1-2
Error: invalid arguments passed to utility function [m] in [m-1-2]
Invalid argument of type angle
t1 m-1deg
Error: invalid arguments passed to utility function [m] in [m-1deg]
Definition order.
t1 m-1 mx-1 my-1 mt-1 mr-1 mb-1 ml-1
.t1.m-1 { margin: 1px; } .t1.mx-1 { margin-left: 1px; margin-right: 1px; } .t1.my-1 { margin-top: 1px; margin-bottom: 1px; } .t1.mt-1 { margin-top: 1px; } .t1.mr-1 { margin-right: 1px; } .t1.mb-1 { margin-bottom: 1px; } .t1.ml-1 { margin-left: 1px; }