Switch to border-box — practice exercise

What you'll be asked to do

1. 1.Switch to border-boxexercise · easy · 10 min

   Make #box use border-box sizing.

   Passes when: Make #box use border-box sizing.

2. 2.Keep the width with paddingexercise · easy · 10 min · practice plan

   Set 200px wide with 20px padding under border-box.

   Passes when: Set 200px wide with 20px padding under border-box.

3. 3.Include the border tooexercise · easy · 10 min · practice plan

   Add a 5px border and keep the box 200px wide.

   Passes when: Add a 5px border and keep the box 200px wide.

4. 4.Apply it globallyexercise · easy · 10 min · practice plan

   Set border-box on every element with the universal selector.

   Passes when: Set border-box on every element with the universal selector.

5. 5.Compare with content-boxexercise · medium · 10 min · practice plan

   Explicitly set content-box on the parent and border-box on the box.

   Passes when: Explicitly set content-box on the parent and border-box on the box.

6. 6.Fix the content-box overflowbug fix · easy · 8 min

   Padding is widening the box past 200px.

   Passes when: Padding is widening the box past 200px.

7. 7.Fix the misspelled valuebug fix · easy · 8 min · practice plan

   The value is border-box, not box-border.

   Passes when: The value is border-box, not box-border.

8. 8.Fix the misspelled propertybug fix · easy · 8 min · practice plan

   The property is box-sizing, not sizing.

   Passes when: The property is box-sizing, not sizing.

9. 9.Fix the rule applied too narrowlybug fix · easy · 8 min · practice plan

   Only the box got border-box; the parent needs it too.

   Passes when: Only the box got border-box; the parent needs it too.

10. 10.Fix the border pushing the width outbug fix · easy · 8 min · practice plan

    Under content-box the 5px border adds to the 200px.

    Passes when: Under content-box the 5px border adds to the 200px.

Between them these tasks cover border-box vs content-box and Predictable sizing.

Looking for a different chapter? See every practice set, or switch to the interview theory questions.