Reset font-size:0 doesn't work with 'em

问题:

I have a parent element that sets the font-size to 0 (zero) and its child that restore the value

.parent {
  font-size: 0;
}

.child {
  font-size: 1em;
  /* font-size: 16px; */
}

Using em it doesn't work. Using px as unit makes the text appear again instead.

Can anybody explain me why?

回答1:

Yes, it's normal. Because em it's a relative meassure. If you think in what are you making, you are making this:

0 * 1 = 0

So if you reset to 0 you'll obtain forever a zero value.

You need to use rem (root em) or px.

.child {
   font-size: 1rem;
}

Rems are from the document