Top, right, bottom, left offsets in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Tailwind's top offset utility

Which Tailwind CSS class correctly moves an element 2rem down from the top edge of its nearest positioned ancestor?

A bottom-8

B top-2

C top-8

D mt-8

💡 Hint

Remember, Tailwind's spacing scale uses multiples of 0.25rem, so 8 means 2rem.

The top-8 class sets top: 2rem; which moves the element down 2rem from the top edge. The mt-8 adds margin-top, which affects layout differently. top-2 moves it 0.5rem down, and bottom-8 moves it up from the bottom edge.

📝 Syntax

intermediate

Correct Tailwind class for right offset

Which Tailwind CSS class applies a 1rem offset from the right edge of a positioned element?

A mr-4

B right-4

C right-1

D pr-4

💡 Hint

Check Tailwind's spacing scale and remember that right-4 sets right: 1rem;.

right-4 sets right: 1rem; which offsets the element 1rem from the right edge. mr-4 adds margin-right, right-1 sets 0.25rem offset, and pr-4 adds padding-right.

❓ rendering

advanced

Visual effect of bottom-0 class

What will you see if you apply the class bottom-0 to a position: absolute element inside a container?

A The element sticks to the bottom edge of the container with no space.

B The element moves 0.25rem above the bottom edge.

C The element moves 1rem above the bottom edge.

D The element stays in its original position.

💡 Hint

The bottom-0 class sets bottom: 0;.

Applying bottom-0 sets the CSS property bottom: 0;, which places the absolutely positioned element flush against the bottom edge of its nearest positioned ancestor.

❓ selector

advanced

Choosing the correct Tailwind class for left offset

You want to move an absolutely positioned element 3rem away from the left edge. Which Tailwind class should you use?

A left-3

B ml-12

C pl-12

D left-12

💡 Hint

Tailwind spacing scale: 12 means 3rem (12 * 0.25rem).

left-12 sets left: 3rem; which moves the element 3rem from the left edge. left-3 moves it 0.75rem, ml-12 adds margin-left, and pl-12 adds padding-left.

❓ accessibility

expert

Accessibility impact of using offsets for focus outlines

If you use Tailwind's top-4 and left-4 classes to offset a custom focus outline element away from a button, what accessibility issue might arise?

A The focus outline may not align with the button, confusing keyboard users.

B Screen readers will not announce the button's label correctly.

C The button will lose its click functionality.

D The button's color contrast will automatically fail.

💡 Hint

Think about how keyboard users rely on visible focus outlines.

Offsetting the focus outline away from the button can cause confusion because keyboard users expect the outline to highlight the focused element. Misaligned outlines reduce clarity and can harm navigation.