Skip to main content

Logical Properties — exercises and bug fixes

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

    Space on the inline axis

    easy10 min

    Give #text a 20px margin at the inline start.

  2. 2

    Pad on the block axis

    easy10 min

    Give #text 10px of padding on the block axis.

  3. 3

    Prove the mapping in RTL

    easy10 min

    In a right-to-left wrapper, an inline-start margin should land on the right.

  4. 4

    Change the writing mode

    easy10 min

    Set #wrap to a vertical right-to-left writing mode.

  5. 5

    Border on the inline end

    medium10 min

    Give #text a 2px solid red border at the inline end, in RTL.

Find the bug(5)

  1. 1

    Fix the misspelled property

    easy8 min

    The property is margin-inline-start.

  2. 2

    Fix the wrong axis

    easy8 min

    padding-block covers the top and bottom edges.

  3. 3

    Fix the physical property in RTL

    easy8 min

    margin-left ignores the text direction.

  4. 4

    Fix the writing mode value

    easy8 min

    The value is vertical-rl.

  5. 5

    Fix the border on the wrong edge

    easy8 min

    In RTL the inline end is the left edge.

Ready to write the code?

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

Open the workspace