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

Course Content

Tailwind CSS for Web Development

Tailwind CSS for Web Development

1. Introduction and Setup
2. Core Concepts and Basic Styling
3. Building Basic Components
4. Layout Basics
5. Responsiveness and Customization

bookChallenge: 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.
html

index

css

index

js

index

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.
html

index

css

index

js

index

copy

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 4. Chapter 2
We're sorry to hear that something went wrong. What happened?
some-alt