HTML / CSS : Removing white-spaces between elements - Benefit of font-size 0.1px (instead of 0)?

Question

In CSS it is common to remove white-spaces between elements by setting the font-size of the container element to 0px.

On the child elements becomes set to the normal size again.

I've always applied "font-size: 0" to the container element and that worked fine.

Now I've seen in other people's code that many use "font-size: 0.1px;" instead. For example here: https://www.barrelny.com/blog/text-align-justify-and-rwd/

In section "Break Elements" ...

What's the benefit of keeping these remaining font-size?

Answer 1

Here is a list of some sort of solutions for your promlem: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

In my opinion, using font-size: 0 / 0.1px might not be the best approch:

Matt Stow reports that the font-size: 0; technique has some problems on Android. Quote: Pre-Jellybean does not remove the space at all, and Jellybean has a bug whereby the last element randomly has a tiny bit of space. See research.

Also note, if you're sizing fonts in ems, this zero font size thing can be an issue, since ems cascade the children would also have zero font size. Rems would be of help here, otherwise any other non-cascading font-size to bump it back up.

Another weirdness! Doug Stewart showed me that if you use @font-face with this technique, the fonts will lose anti-aliasing in Safari 5.0.x. (test case) (screenshot).