Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende 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

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 2

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Awesome!

Completion rate improved to 3.57

bookChallenge: Mastering Spacing Utilities

Desliza para mostrar el menú

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

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 2
some-alt