Margin

Use margin utilities to control the space around an element. Tailwind v4 ships physical (mt/mr/mb/ml), inline-axis logical (ms/me), and block-axis logical (mbs/mbe) variants on the same spacing scale, plus negative variants on every prefix.

Basic example

Use m-<number> utilities like m-4 and m-8 to control the margin on all sides of an element.

Style('m-8 ...', child: Text('m-8'))

Adding margin to a single side

Use mt-<number>, mr-<number>, mb-<number>, and ml-<number> utilities like ml-2 and mt-6 to control the margin on one side of an element.

Style('mt-6 ...', child: Text('mt-6'))
Style('mr-4 ...', child: Text('mr-4'))
Style('mb-8 ...', child: Text('mb-8'))
Style('ml-2 ...', child: Text('ml-2'))

Adding horizontal margin

Use mx-<number> utilities like mx-4 and mx-8 to control the horizontal margin of an element.

Style('mx-8 ...', child: Text('mx-8'))

Adding vertical margin

Use my-<number> utilities like my-4 and my-8 to control the vertical margin of an element.

Style('my-8 ...', child: Text('my-8'))

Using negative values

Prefix the margin class with a dash to convert it to a negative value (e.g. -mt-8). Negative margins shift the box up/left into the previous sibling’s space — Flutter implements this via Transform.translate since Padding cannot accept negative insets.

Style('h-16 w-36 border border-sky-700/10 bg-sky-400/20 ...')
Style('-mt-8 bg-sky-500 ...', child: Text('-mt-8'))

Using logical properties

Use ms-<number> or me-<number> utilities to set the margin-inline-start and margin-inline-end logical properties. Block-axis siblings mbs-<number> / mbe-<number> map to physical top/bottom in Flutter’s horizontal writing mode.

Directionality(
  textDirection: TextDirection.ltr,
  child: Style('ms-8 ...', child: Text('ms-8')),
)
Directionality(
  textDirection: TextDirection.ltr,
  child: Style('me-8 ...', child: Text('me-8')),
)
Directionality(
  textDirection: TextDirection.rtl,
  child: Style('ms-8 ...', child: Text('ms-8')),
)
Directionality(
  textDirection: TextDirection.rtl,
  child: Style('me-8 ...', child: Text('me-8')),
)

Adding space between children

Use space-x-<number> or space-y-<number> utilities to control the space between elements (resolved by the dedicated SpaceBetweenResolver).

Style('flex space-x-4 ...', children: [
  Text('01'),
  Text('02'),
  Text('03'),
])

Reversing children order

If your elements are in reverse order (e.g. flex-row-reverse), use space-x-reverse to ensure the space is added to the correct side of each element.

Style('flex flex-row-reverse space-x-4 space-x-reverse ...', children: [
  Text('01'),
  Text('02'),
  Text('03'),
])

Class reference

Class	CSS property
m-<n> / m-px / m-[<v>] / m-auto	margin (auto centers horizontally only)
mx-<n> / mx-auto	margin-inline
my-<n> / my-px / my-[<v>]	margin-block
ms-<n> / ms-px / ms-[<v>]	margin-inline-start
me-<n> / me-px / me-[<v>]	margin-inline-end
mbs-<n> / mbs-px / mbs-[<v>]	margin-block-start (= top)
mbe-<n> / mbe-px / mbe-[<v>]	margin-block-end (= bottom)
mt-<n> / mt-px / mt-[<v>]	margin-top
mr-<n> / mr-px / mr-[<v>]	margin-right
mb-<n> / mb-px / mb-[<v>]	margin-bottom
ml-<n> / ml-px / ml-[<v>]	margin-left
space-x-<n> / space-y-<n> / space-x-reverse / space-y-reverse	resolved by SpaceBetweenResolver

Negative variants (e.g. -mt-4, -mbs-8, -mx-2) flip the sign on every physical and block-axis prefix. m-auto and mx-auto produce horizontal centering; my-auto / mt-auto / etc. have no Flutter equivalent and are silently ignored.

Custom properties

m-(<custom-property>) and the per-prefix variants are resolved against theme-defined StyleThemeData.customProperties — e.g. m-(--my-margin) behaves like m-[1.5rem] when the theme defines --my-margin: '1.5rem'. Cascade-inherited or JS-set CSS variables remain out of scope.

Parity omissions

• Negative inline-axis (-ms-<n> / -me-<n>) — not currently registered. No upstream <Example> uses them; add when needed.
• my-auto / mt-auto and per-side -auto variants — Flutter has no per-side auto margin equivalent. Only m-auto and mx-auto are supported (both produce horizontal centering).