Skip to main content

CSS Padding — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the CSS Padding 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 padding on all sides

    easy10 min

    Give #box 16px padding on every side.

  2. 2

    Add padding to one side

    easy10 min

    Give #box 24px of left padding only.

  3. 3

    Use the two-value shorthand

    easy10 min

    Give #box 8px vertical and 20px horizontal padding.

  4. 4

    Use the four-value shorthand

    easy10 min

    Set padding top 4px, right 8px, bottom 12px, left 16px.

  5. 5

    Pad with rem units

    medium10 min

    Give #box 1.5rem padding (24px).

Find the bug(5)

  1. 1

    Fix margin used instead of padding

    easy8 min

    Space inside the element is padding.

  2. 2

    Fix the four-value order

    easy8 min

    The shorthand runs top, right, bottom, left — this one is reversed.

  3. 3

    Fix the missing unit

    easy8 min

    Padding needs a unit to take effect.

  4. 4

    Fix the wrong side

    easy8 min

    The padding was applied on the right instead of the left.

  5. 5

    Fix the invalid negative padding

    easy8 min

    Padding cannot be negative, so the rule is dropped.

Ready to write the code?

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

Open the workspace