Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Challenge: Master Spacing Utilities | Layout Basics
Tailwind CSS for Web Development

bookChallenge: Master Spacing Utilities

Task

Complete the provided HTML structure by filling in the missing Tailwind CSS classes according to the given spacing requirements.

  • First div: Apply a margin of 2rem (32px) on all sides and padding of 1rem (16px) on all sides;
  • Second div: Apply a top margin of 1rem (16px) and bottom margin of 2rem (32px). Apply padding of 0.5rem (8px) on all sides;
  • Third div: Apply a right margin of 1.5rem (24px) and left margin of 0.75rem (12px). Apply padding of 1.5rem (24px) on all sides.
index.html

index.html

copy
  1. For the first div, use m-8 for margin and p-4 for padding.
  2. For the second div, use mt-4 mb-8 for margin and p-2 for padding.
  3. For the third div, use mr-6 ml-3 for margin and p-6 for padding.
index.html

index.html

copy

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 4. ChapterΒ 2

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you show me the complete HTML structure with the Tailwind classes applied?

Do you need an explanation of how these Tailwind classes correspond to the spacing requirements?

Would you like a brief overview of how Tailwind spacing utilities work?

Awesome!

Completion rate improved to 3.57

bookChallenge: Master Spacing Utilities

Swipe to show menu

Task

Complete the provided HTML structure by filling in the missing Tailwind CSS classes according to the given spacing requirements.

  • First div: Apply a margin of 2rem (32px) on all sides and padding of 1rem (16px) on all sides;
  • Second div: Apply a top margin of 1rem (16px) and bottom margin of 2rem (32px). Apply padding of 0.5rem (8px) on all sides;
  • Third div: Apply a right margin of 1.5rem (24px) and left margin of 0.75rem (12px). Apply padding of 1.5rem (24px) on all sides.
index.html

index.html

copy
  1. For the first div, use m-8 for margin and p-4 for padding.
  2. For the second div, use mt-4 mb-8 for margin and p-2 for padding.
  3. For the third div, use mr-6 ml-3 for margin and p-6 for padding.
index.html

index.html

copy

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 4. ChapterΒ 2
some-alt