Skip to main content

Box Sizing — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Box Sizing lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Switch to border-box

    easy10 min

    Make #box use border-box sizing.

  2. 2

    Keep the width with padding

    easy10 min

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

  3. 3

    Include the border too

    easy10 min

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

  4. 4

    Apply it globally

    easy10 min

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

  5. 5

    Compare with content-box

    medium10 min

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

Find the bug(5)

  1. 1

    Fix the content-box overflow

    easy8 min

    Padding is widening the box past 200px.

  2. 2

    Fix the misspelled value

    easy8 min

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

  3. 3

    Fix the misspelled property

    easy8 min

    The property is box-sizing, not sizing.

  4. 4

    Fix the rule applied too narrowly

    easy8 min

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

  5. 5

    Fix the border pushing the width out

    easy8 min

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

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace