Use pixels — practice exercise

What you'll be asked to do

1. 1.Use pixelsexercise · easy · 10 min

   Give #box a 150px width.

   Passes when: Give #box a 150px width.

2. 2.Use remexercise · easy · 10 min · practice plan

   Give #box a 2rem font size (32px).

   Passes when: Give #box a 2rem font size (32px).

3. 3.Use em relative to the elementexercise · easy · 10 min · practice plan

   Set the box font to 20px and its padding to 1em (20px).

   Passes when: Set the box font to 20px and its padding to 1em (20px).

4. 4.Use a unitless line heightexercise · easy · 10 min · practice plan

   Give #box a line-height of 1.5 with no unit.

   Passes when: Give #box a line-height of 1.5 with no unit.

5. 5.Mix units deliberatelyexercise · medium · 10 min · practice plan

   Set a 1rem margin and a 24px padding on the box.

   Passes when: Set a 1rem margin and a 24px padding on the box.

6. 6.Fix the missing unitbug fix · easy · 8 min

   A bare number is invalid for width.

   Passes when: A bare number is invalid for width.

7. 7.Fix rem mistaken for pixelsbug fix · easy · 8 min · practice plan

   2rem is 32px, not 2px — the intent was 32px.

   Passes when: 2rem is 32px, not 2px — the intent was 32px.

8. 8.Fix em compoundingbug fix · easy · 8 min · practice plan

   The padding should equal the element's own 20px font size.

   Passes when: The padding should equal the element's own 20px font size.

9. 9.Fix the unit on line-heightbug fix · easy · 8 min · practice plan

   A unitless line-height scales with the font; 1.5 was intended.

   Passes when: A unitless line-height scales with the font; 1.5 was intended.

10. 10.Fix the invalid unitbug fix · easy · 8 min · practice plan

    "pixels" is not a CSS unit.

    Passes when: "pixels" is not a CSS unit.

Between them these tasks cover Absolute vs relative units, rem and em and Unitless values.

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