Single-side margin utility example
The mt-6, mr-4, mb-8, and ml-2 utility classes add margin to the top, right, bottom, and left sides respectively of an element.
Tailwind CSS · Utilities reference · all subjects
margin
19 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Horizontal margin utility example
The mx-8 utility class adds horizontal margin (left and right) to an element.
Vertical margin utility example
The my-8 utility class adds vertical margin (top and bottom) to an element.
Negative margin usage example
The -mt-8 utility class applies a negative top margin of -8 spacing units to overlap elements.
Margin utility prefixes and CSS properties
Margin utilities use the following prefixes: m (margin), mx (margin-inline), my (margin-block), ms (margin-inline-start), me (margin-inline-end), mbs (margin-block-start), mbe (margin-block-end), mt (margin-top), mr (margin-right), mb (margin-bottom), ml (margin-left).
Margin numeric utility syntax
Margin utilities support numeric modifiers with the syntax m-<number>, which produces margin: calc(var(--spacing) * <number>). Negative values are supported with the syntax -m-<number>, which produces margin: calc(var(--spacing) * -<number>).
Margin auto and pixel utilities
Margin utilities support m-auto which produces margin: auto, m-px which produces margin: 1px, and -m-px which produces margin: -1px.
Margin custom property and arbitrary value syntax
Margin utilities support custom properties with the syntax m-(<custom-property>) which produces margin: var(<custom-property>), and arbitrary values with the syntax m-[<value>] which produces margin: <value>.
Space-x utility CSS output
The space-x-<number> utility applies margin-inline spacing between children with the CSS: & > :not(:last-child) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * <number>) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * <number>) * calc(1 - var(--tw-space-x-reverse))); }. Negative values use -space-x-<number>. The space-x-px and -space-x-px utilities apply 1px and -1px respectively.
Space-y utility CSS output
The space-y-<number> utility applies margin-block spacing between children with the CSS: & > :not(:last-child) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * <number>) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * <number>) * calc(1 - var(--tw-space-y-reverse))); }. Negative values use -space-y-<number>. The space-y-px and -space-y-px utilities apply 1px and -1px respectively.
Space-x-reverse and space-y-reverse utilities
The space-x-reverse utility sets --tw-space-x-reverse: 1 on children that are not the last child. The space-y-reverse utility sets --tw-space-y-reverse: 1 on children that are not the last child. These are used when elements are in reverse order (using flex-row-reverse or flex-col-reverse).
Space utilities limitations
Space utilities are designed only for adding margin between 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 in complex custom order rather than natural DOM order. For those cases, use gap utilities when possible, or add margin to every element with matching negative margin on the parent. Space utilities are not designed to work together with divide utilities.
Negative margin prefix syntax
Negative margin values are created by prefixing the utility class name with a dash, such as -mt-8, -mx-4, or -mb-2.
Logical margin properties utilities
Logical margin utilities ms-<number> and me-<number> set margin-inline-start and margin-inline-end respectively. The utilities mbs-<number> and mbe-<number> set margin-block-start and margin-block-end respectively. These map to either the top/bottom or left/right sides based on writing mode and document direction.
Space-x and space-y custom property and arbitrary value syntax
Space utilities support custom properties with the syntax space-x-(<custom-property>) or space-y-(<custom-property>) which use var(<custom-property>), and arbitrary values with the syntax space-x-[<value>] or space-y-[<value>] which use <value>. Negative variants are also supported with -space-x-(<custom-property>), -space-x-[<value>], -space-y-(<custom-property>), and -space-y-[<value>].
m-8 margin utility example
The m-8 utility class adds margin on all sides of an element using the spacing scale.
Logical margin properties usage example
The ms-8 utility class sets the inline-start margin (left in LTR, right in RTL), and the me-8 utility class sets the inline-end margin (right in LTR, left in RTL). These adapt automatically based on the dir attribute and writing mode.
Space-x utility example
The space-x-4 utility class adds horizontal margin spacing between child elements within a flex container.
Space-x-reverse utility example
When using flex-row-reverse, the space-x-4 and space-x-reverse utilities together ensure spacing is added to the correct side of each element.