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

bookChallenge: Mastering 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

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 4. Kapitel 2

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

bookChallenge: Mastering 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

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 4. Kapitel 2
some-alt