Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Challenge: Fix a Broken Layout | Le Modèle de Boîte et l'Espacement
Fondamentaux de CSS

Challenge: Fix a Broken Layout

Glissez pour afficher le menu

Task

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

  • 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

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 5

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Section 3. Chapitre 5
some-alt