utilities/margin

6 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Margin utility classes reference

Margin utilities are prefixed with m and map to CSS margin properties. The m prefix controls margin on all sides and maps to margin. The mx prefix maps to margin-inline. The my prefix maps to margin-block. The mt, mr, mb, ml prefixes map to margin-top, margin-right, margin-bottom, margin-left respectively. The ms prefix maps to margin-inline-start. The me prefix maps to margin-inline-end. The mbs prefix maps to margin-block-start. The mbe prefix maps to margin-block-end.

Margin utility value formats

Margin utilities support the following value formats: m-<number> applies margin using calc(var(--spacing) * <number>). -m-<number> applies negative margin using calc(var(--spacing) * -<number>). m-auto sets margin to auto. m-px sets margin to 1px. -m-px sets margin to -1px. m-(<custom-property>) uses a custom CSS property variable. m-[<value>] applies an arbitrary value.

Space utilities for children spacing

The space-x-<number> utility adds horizontal spacing between child elements by applying margin-inline-start and margin-inline-end to all children except the last child. The space-y-<number> utility adds vertical spacing between child elements by applying margin-block-start and margin-block-end to all children except the last child. Both utilities use the --tw-space-x-reverse or --tw-space-y-reverse custom property to manage direction.

Space reverse utilities

The space-x-reverse utility sets --tw-space-x-reverse to 1, which reverses the direction of horizontal spacing between children. The space-y-reverse utility sets --tw-space-y-reverse to 1, which reverses the direction of vertical spacing between children. These are used with flex-row-reverse or flex-col-reverse to ensure spacing is applied to the correct side.

Space utilities limitations

Space utilities are designed only for adding margin to all-but-the-last-item in a group. They are not designed to handle complex cases like grids, layouts that wrap, or situations where children are rendered in a complex custom order. For those situations, the gap utilities should be used when possible, or margin should be added to every element with a matching negative margin on the parent. Space utilities are not designed to work together with divide utilities.

Margin utilities customization

Margin utilities can be customized by adjusting the spacing scale in the theme configuration. All margin utility variants (m, mx, my, ms, me, mbs, mbe, mt, mr, mb, ml) are customized through the same spacing scale.

Give your agent this brain