Skip to main content

CSS Margin — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the CSS Margin 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

    Add margin on all sides

    easy10 min

    Give #box a 20px margin on every side.

  2. 2

    Add margin to one side

    easy10 min

    Give #box a 30px bottom margin only.

  3. 3

    Use the two-value shorthand

    easy10 min

    Give #box 10px vertical and 40px horizontal margin.

  4. 4

    Use rem units

    easy10 min

    Give #box a 1rem margin on all sides (16px).

  5. 5

    Pull an element up

    medium10 min

    Give #other a -10px top margin to overlap the box above.

Find the bug(5)

  1. 1

    Fix padding used instead of margin

    easy8 min

    Space outside the element is margin, not padding.

  2. 2

    Fix the missing unit

    easy8 min

    A bare number is invalid for margin, so nothing applies.

  3. 3

    Fix the wrong side

    easy8 min

    The margin was applied to the top instead of the bottom.

  4. 4

    Fix the reversed shorthand

    easy8 min

    The vertical and horizontal values are swapped.

  5. 5

    Fix the misspelled property

    easy8 min

    "margins" is not a CSS property.

Ready to write the code?

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

Open the workspace