Spacing and Sizing

🧑‍🏫 Sabse pehle — simple mein samjho#

CSS mein margin, padding, width aur height dena sabse common kaam hai. Tailwind ne in sabke liye ek asaan sa shortcut banaya hai. p matab padding, m matlab margin, w matlab width, aur h matlab height. Inke aage jo number lagta hai wo normally 4 ka multiple hota hai (e.g., p-4 matlab 16px). Is scale ko follow karne se tumhari website apne aap balanced aur proportional dikhti hai!

The 4-Point Spacing Scale#

Tailwind uses a highly predictable proportional scale based on rem. As a general rule of thumb: 1 unit = 0.25rem (which translates to 4px in default browser settings).

• 1 = 4px
• 2 = 8px
• 4 = 16px
• 8 = 32px

Padding (p-) and Margin (m-)#

You can target all sides, specific axes, or individual sides.

• All sides: p-4 (padding: 16px) or m-4 (margin: 16px)
• Axes (X and Y):
  • px-4 (padding-left & padding-right: 16px)
  • py-2 (padding-top & padding-bottom: 8px)
• Individual sides:
  • pt-4 (padding-top)
  • pr-4 (padding-right)
  • pb-4 (padding-bottom)
  • pl-4 (padding-left)
  • Similarly for margins: mt-4, mr-4, mb-4, ml-4.

Negative margins are supported by prepending a minus sign: -mt-4.

Width (w-) and Height (h-)#

You use the same numerical scale for fixed sizing, plus a few specific string values for dynamic sizing.

Fixed Sizing#

• w-8 (width: 32px)
• h-16 (height: 64px)

Fluid / Relative Sizing#

• w-full (width: 100%)
• w-screen (width: 100vw - full viewport width)
• w-1/2 (width: 50%)
• w-1/3 (width: 33.333333%)

Min/Max Constraints#

• min-h-screen (Minimum height: 100vh - Very common for main page wrappers)
• max-w-7xl (Maximum width applied to center containers)
• max-w-fit (Maximum width respects the content size)

Gap (gap-)#

When utilizing Flexbox or CSS Grid, gap is the cleanest way to establish consistent spacing between child elements without dealing with adjacent sibling margins.

• gap-4 (Applies 16px spacing between both rows and columns)
• gap-x-4 (Horizontal gap only)
• gap-y-2 (Vertical gap only)

<!-- Try modifying the p-6, max-w-sm, mt-10 and gap-4 classes! -->
<div class="w-full max-w-sm mx-auto p-6 mt-10 bg-white border border-gray-200 rounded-2xl shadow-lg">
  <div class="flex items-center gap-4 mb-4">
    <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold">TR</div>
    <div>
      <h3 class="text-lg font-semibold text-gray-900 m-0">Tarun Rana</h3>
      <p class="text-sm text-gray-500 m-0">Software Engineer</p>
    </div>
  </div>
  <p class="text-gray-600">This card uses padding (p-6), margins (mt-10, mx-auto), fixed sizing (w-12, h-12), and gaps (gap-4) to create a clean layout.</p>
</div>