Challenge: 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
- For the first
div, usem-8for margin andp-4for padding. - For the second
div, usemt-4 mb-8for margin andp-2for padding. - For the third
div, usemr-6 ml-3for margin andp-6for padding.
index.html
Everything was clear?
Thanks for your feedback!
SectionΒ 4. ChapterΒ 2
Ask AI
Ask AI
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
Challenge: 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
- For the first
div, usem-8for margin andp-4for padding. - For the second
div, usemt-4 mb-8for margin andp-2for padding. - For the third
div, usemr-6 ml-3for margin andp-6for padding.
index.html
Everything was clear?
Thanks for your feedback!
SectionΒ 4. ChapterΒ 2