Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Challenge: Fix a Broken Layout | The Box Model and Spacing
CSS Fundamentals

bookChallenge: Fix a Broken Layout

Swipe to show menu

You are given three cards. Update the layout using the following requirements. Each card should:

  • Have a width of 200px.
  • Have 20px internal spacing.
  • Have 15px space between cards.
  • Have a border that is 2 pixels wide, with a solid style and gray color.
  • Keep the declared width unchanged even after adding padding and border.
index.html

index.html

index.css

index.css

copy
  • Use the width property to define the element's width.
  • Use padding for internal spacing.
  • Use margin to create space between cards.
  • Use border: 2px solid gray to add the border.
  • Use box-sizing: border-box to prevent padding and border from increasing the total width.
index.html

index.html

index.css

index.css

copy
Everything was clear?

How can we improve it?

Thanks for your feedback!

Sectionย 3. Chapterย 5

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

Sectionย 3. Chapterย 5
some-alt