Negative Margins and Space Between
Pull elements closer with negative margins like -mt-4, and use space-x-* and space-y-* to add gaps between children.
What Are Negative Margins?
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.
<!-- Pull an element upward over the previous element -->
<div class="bg-indigo-600 h-32 rounded-t-xl"></div>
<div class="bg-white rounded-xl shadow p-6 -mt-8 mx-4">
This card overlaps the colored header above
</div>Negative Margin Syntax in Tailwind
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.
<div class="bg-blue-600 h-24 rounded-xl"></div>
<div class="-mt-6 ml-6 inline-block bg-white shadow-lg rounded-lg px-6 py-4">
<span class="text-blue-700 font-semibold">Overlapping Badge</span>
</div>All lessons in this course
- The Tailwind Spacing Scale
- Padding Utilities
- Margin Utilities and Auto Margins
- Negative Margins and Space Between