CodePark/ questions / Responsive design & units
START PRACTICINGPRACTICE
Frontend question · CSS & HTML › Responsive design & units

What is the computed padding of .child (vertical, horizontal)?

html   { font-size: 16px; }
.parent { font-size: 20px; }
.child {
  font-size: 1.5em;
  padding: 1rem 1em;
}
16px 30px

16px 30px is right. rem is relative to the root font size, so 1rem = 16px for the vertical padding.

em works in two ways. Inside font-size, it is relative to the parent's font size, so 1.5 × 20 = 30px. In other properties, it uses the element's own font size. So 1em of padding is 30px.

16px 20px is the tempting wrong answer. It uses the parent's 20px for the padding, but padding uses the element's own 30px.