Margin

Adds space outside an element's borders, controlling the distance between elements. Margin creates separation between components and helps establish rhythm in your layouts. Unlike padding, margin can be negative and can collapse between adjacent elements. In Tailwind v4, margin utilities fully support logical properties for better RTL language support.

Spacing2 variants5 examples

Official Docs Open Playground

Basic usage: <div class="m-4 bg-blue-100 p-4 rounded">Margin on all sides (1rem)</div>

Examples

Basic margin on all sides - notice the space around the element

<div class="m-4 bg-blue-100 p-4 rounded">Margin on all sides (1rem)</div>

Edit in playground

Using mx-auto to center an element horizontally (when it has a width)

<div class="mx-auto max-w-md bg-green-100 p-4 rounded">Horizontally centered with auto margins</div>

Edit in playground

Using vertical margins to create rhythm between text elements

<div>
  <p class="mb-4">This paragraph has margin below it.</p>
  <p class="mb-4">This creates consistent spacing between paragraphs.</p>
  <p>This is the last paragraph with no bottom margin.</p>
</div>

Edit in playground

Responsive margins that change based on screen size and layout

<!-- Responsive margins example -->
<div class="flex flex-col md:flex-row">
  <div class="bg-blue-100 p-4 rounded md:mr-6 mb-6 md:mb-0">
    <h2 class="text-lg font-bold">First Card</h2>
    <p>This card has bottom margin on mobile, right margin on desktop.</p>
  </div>
  <div class="bg-blue-100 p-4 rounded">
    <h2 class="text-lg font-bold">Second Card</h2>
    <p>This card adapts to the layout changes.</p>
  </div>
</div>

Edit in playground

Using negative margin to create an overlapping element

<!-- Negative margins for special layouts -->
<div class="relative py-16 bg-gray-100">
  <div class="mx-auto max-w-4xl">
    <div class="bg-white rounded-lg shadow-lg p-8 -mt-12 relative z-10">
      <h2 class="text-2xl font-bold mb-4">Overlapping Card</h2>
      <p>This card uses negative margin to create an overlapping effect.</p>
    </div>
  </div>
</div>

Edit in playground