Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära 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 allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 2

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

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 allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 2
some-alt