Utilities for controlling an element
Use m-<number> utilities like m-4 and m-8 to control the margin on all sides of an element:
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:
Use mx-<number> utilities like mx-4 and mx-8 to control the horizontal margin of an element:
Use my-<number> utilities like my-4 and my-8 to control the vertical margin of an element:
To use a negative margin value, prefix the class name with a dash to convert it to a negative value:
Use ms-<number> or me-<number> utilities like ms-4 and me-8 to set the margin-inline-start and margin-inline-end logical properties:
Use the mbs-<number> and mbe-<number> utilities to set the margin-block-start and margin-block-end logical properties, which map to either the top or bottom side based on the writing mode:
<!-- [!code classes:mbs-8] -->
<div class="mbs-8 ...">mbs-8</div>Use space-x-<number> or space-y-<number> utilities like space-x-4 and space-y-8 to control the space between elements:
If your elements are in reverse order (using say flex-row-reverse or flex-col-reverse), use the space-x-reverse or space-y-reverse utilities to ensure the space is added to the correct side of each element:
The space utilities are really just a shortcut for adding margin to all-but-the-last-item in a group, and aren't designed to handle complex cases like grids, layouts that wrap, or situations where the children are rendered in a complex custom order rather than their natural DOM order.
For those situations, it's better to use the gap utilities when possible, or add margin to every element with a matching negative margin on the parent.
Additionally, the space utilities are not designed to work together with the divide utilities. For those situations, consider adding margin/padding utilities to the children instead.