0
0
Tailwindmarkup~5 mins

Top, right, bottom, left offsets in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Offsets help you move elements away from the edges of their container. They control space from the top, right, bottom, or left sides.

You want to move a button down a little from the top of the page.
You need to push a box away from the right edge of its container.
You want to add space below a header without changing margins.
You want to position a tooltip a bit above or below an element.
You want to nudge an image slightly to the left inside a card.
Syntax
Tailwind
top-{size}
right-{size}
bottom-{size}
left-{size}

Replace {size} with Tailwind spacing values like 0, 1, 2, 4, 8, etc.

These classes work when the element has relative, absolute, or fixed positioning.

Examples
This moves the element 1rem down from its normal position (top offset).
Tailwind
<div class="relative top-4">Content</div>
This places the element 2rem away from the right edge of its positioned container.
Tailwind
<div class="absolute right-8">Box</div>
This fixes the element 0.5rem above the bottom and 0.5rem from the left of the viewport.
Tailwind
<div class="fixed bottom-2 left-2">Fixed Box</div>
Sample Program

This example shows a box with four smaller boxes positioned inside it using top, right, bottom, and left offsets. Each small box is moved away from the edges by 1rem (4 in Tailwind spacing).

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Top, Right, Bottom, Left Offsets Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="relative h-screen bg-gray-100">
  <div class="relative bg-white p-4 w-64 h-40 border border-gray-300">
    <div class="absolute top-4 left-4 bg-blue-500 text-white p-2 rounded">
      Top Left Offset
    </div>
    <div class="absolute top-4 right-4 bg-green-500 text-white p-2 rounded">
      Top Right Offset
    </div>
    <div class="absolute bottom-4 left-4 bg-red-500 text-white p-2 rounded">
      Bottom Left Offset
    </div>
    <div class="absolute bottom-4 right-4 bg-yellow-500 text-black p-2 rounded">
      Bottom Right Offset
    </div>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Offsets only work if the element has a positioning context like relative, absolute, or fixed.

Use Tailwind spacing scale for consistent spacing (e.g., 1 = 0.25rem, 4 = 1rem).

Offsets move the element visually but do not affect the space it takes in the normal page flow.

Summary

Top, right, bottom, and left offsets move elements away from container edges.

They require the element to have a position other than static.

Use Tailwind classes like top-4, right-8 to set these offsets easily.