負のマージンと要素間のスペース

Negative margins pull an element toward or beyond the boundaries of its container or sibling. In CSS, a negative margin-top pulls an element upward; a negative margin-left pulls it leftward. This creates overlapping effects and allows elements to break out of their natural document flow. Tailwind supports negative margins with a - prefix on any margin utility.

Prefix any margin utility with a hyphen to make it negative: -mt-4 is margin-top: -16px, -mx-4 is margin-left: -16px; margin-right: -16px. The same spacing scale applies — -mt-1 is -4px, -mt-8 is -32px. You cannot make padding negative in CSS (padding is always non-negative), only margins.

A common use of negative margins is making a full-bleed image break out of a padded container. If a content container has px-6 (24px horizontal padding), a negative -mx-6 on an image inside it removes that padding, making the image stretch edge-to-edge while the surrounding text remains padded. This technique is common in blog article layouts.

Profile cards, pricing cards, and feature cards often have an avatar or icon that overlaps the card's top edge. Apply a negative top margin to the card body, or a negative bottom margin to the header element, to create this overlap. Pair with a defined z-index using Tailwind's z-* utilities to control which element appears on top.

When a grid needs to bleed to the edges of a screen while maintaining inner gutters, use negative horizontal margins on the grid container combined with positive padding on grid items. This technique, sometimes called the negative margin grid, ensures items align to the container edges while maintaining consistent gutters between them.

The space-x-* and space-y-* utilities add margin between sibling elements without adding margin to the first child. Apply them to a parent container, and Tailwind automatically adds margin-left to every direct child except the first. This is a convenient alternative to gap-* when flex or grid is not in use, or for adding space between items in a list.

space-y-* adds top margin to every direct child except the first, creating uniform vertical spacing in a stacked list. This is particularly useful for navigation menus, card stacks, and form field groups where you want consistent spacing without adding padding to each item individually.

Both space-x-* and gap-x-* add horizontal space between children, but they work differently. space-x-* uses margin-left on children (works with any display type), while gap-* uses CSS gap property (only works in flex or grid contexts). Use gap-* for flex and grid layouts as it also handles wrapping correctly. Use space-x-* when elements are not in a flex/grid context.

When using flex-row-reverse to flip the order of flex children, space-x-* adds margin to the wrong side because children are now visually ordered right-to-left. Fix this by adding space-x-reverse alongside space-x-* — it switches the margin from margin-left to margin-right to match the reversed direction.

User avatar stacks (common in collaboration features) overlap avatars using negative margins. Each subsequent avatar has a negative left margin that partially overlaps the previous one. Apply a border to each avatar and use hover:z-10 to bring a hovered avatar to the top of the stack. This creates the visual impression of a pile of overlapping avatars.

Negative margins are powerful but should be used sparingly. They can cause layout bugs when elements collapse or overflow unexpectedly, are confusing in code reviews, and may conflict with parent overflow-hidden. Prefer gap-* for flex/grid spacing, space-* for sibling spacing, and transform -translate-y-* for visual-only overlaps that should not affect document flow.

In this lesson you learned: negative margins like -mt-4 pull elements upward and can create overlap effects, space-x-* and space-y-* add margin between siblings without affecting the first child, and space-* works for any display type while gap-* is preferred inside flex and grid containers. Next up we explore Tailwind's flexbox utilities for building powerful horizontal and vertical layouts.