Margin utilities in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding margin shorthand in Tailwind CSS

Which Tailwind CSS class adds a margin of 1rem to the top and bottom, and 0.5rem to the left and right of an element?

A m-4 m-x-2

B my-4 mx-2

C mt-4 mb-4 ml-2 mr-2

D m-4 mx-2

💡 Hint

Remember that 'my-' controls vertical margins and 'mx-' controls horizontal margins.

In Tailwind CSS, my-4 sets margin-top and margin-bottom to 1rem (4 * 0.25rem), and mx-2 sets margin-left and margin-right to 0.5rem (2 * 0.25rem). Option B correctly applies these margins.

Option B is invalid because m-x-2 is not a valid Tailwind class. Option B is verbose but correct in values; however, it uses individual margin classes instead of shorthand. Option B applies margin 1rem all around with m-4 and then overrides horizontal margins with mx-2, which is contradictory and not the intended shorthand.

📝 Syntax

intermediate

Identify the invalid Tailwind margin class

Which of the following Tailwind CSS margin classes is NOT valid and will cause the styles not to apply?

A my-13

B mx-7

C ml-3

D mr-5

💡 Hint

Check the default spacing scale in Tailwind CSS for margin values.

Tailwind CSS default spacing scale skips some values like 13. The class my-13 is invalid because 13 is not defined in the default scale.

Options A, C, and D use valid spacing values (3 = 0.75rem, 7 = 1.75rem, 5 = 1.25rem).

❓ rendering

advanced

Visual effect of negative margin in Tailwind CSS

What visual effect will the class -mt-6 have on an element?

A Adds a margin-top of 1.5rem pushing the element down

B Adds a negative margin-bottom of 1.5rem pulling the element upward

C Adds a margin-bottom of 1.5rem pushing the element down

D Adds a negative margin-top of 1.5rem pulling the element upward

💡 Hint

Negative margin classes start with a dash and move the element opposite to the margin direction.

The class -mt-6 applies a negative top margin of 1.5rem (6 * 0.25rem), which pulls the element upward, overlapping the element above it.

Option D is incorrect because it describes a positive margin pushing down. Options B and D affect bottom margin, not top.

❓ selector

advanced

Combining margin utilities for responsive design

Which Tailwind CSS class combination applies a margin-left of 2rem on medium screens and larger, but no margin on smaller screens?

A ml-0 md:ml-8

B ml-8 md:ml-0

C md:ml-8 ml-0

D ml-8 md:ml-8

💡 Hint

Remember Tailwind applies mobile-first styles, so unprefixed classes apply to all sizes unless overridden.

Option A sets margin-left to 0 by default (small screens) and overrides it to 2rem (8 * 0.25rem) on medium screens and larger using md:ml-8.

Option A applies margin-left 2rem on all screens and then resets to 0 on medium, which is opposite of the requirement. Option A is similar to B but order matters in Tailwind; unprefixed classes apply first, so it works but is less conventional. Option A applies margin-left 2rem on all screen sizes.

❓ accessibility

expert

Accessibility impact of margin utilities on focus outlines

If you apply large negative margins (e.g., -m-10) to a focusable button, what accessibility issue might occur?

A Negative margins have no effect on accessibility

B The button will become unfocusable by keyboard users

C The button's focus outline might be clipped or hidden, making keyboard navigation difficult

D The button's click area will increase, improving accessibility

💡 Hint

Think about how negative margins affect element positioning and visible outlines.

Applying large negative margins can cause the focus outline to be clipped or pushed outside the visible area, making it hard for keyboard users to see which element is focused.

Option C is incorrect because focusability depends on HTML and tabindex, not margin. Option C is wrong because negative margins do not increase clickable area; they shift the element visually. Option C ignores the visual impact on focus outlines.