relative fonts size question

[Bethrezen]

Hi all

So I have a quick question about relative fonts. Suppose I have some html like this and some css like this

Code: Select all

<ul>
<li></li>
<li></li>
<li></li>
</ul>

Code: Select all

ul li
{
display:inline-block;
}

When you apply display inline-block to the <li>'s you will end up with white space between them, now one way to deal with the white space issue to change your css like this

Code: Select all

ul
{
font-size:0;
}

ul li
{
display:inline-block;
font-size:16px;
}

That eliminates the white space, and then resets the font size of the <li>'s to 16px, but supposed you don’t want to used a fixed size font, because using fixed size fonts is generally consider bad practice from a usability stand point, as it prevents users resizing the text.

well the obvious thing to do is to use a relative font instead like this.

Code: Select all

ul li
{
display:inline-block;
font-size:100%;
}


or this

Code: Select all

ul li
{
display:inline-block;
font-size:1em;
}


The issue however is that it doesn't work, though I'm not entirely clear on why it doesn't work.

So my question is why when I do this

Code: Select all

ul
{
font-size:0;
}

ul li
{
display:inline-block;
font-size:100%;
}


or this

Code: Select all

ul
{
font-size:0;
}

ul li
{
display:inline-block;
font-size:1em;
}


Why does the text size of the child <li> not get reset to 16px which is the default size of text in my browser.

now I'm assuming its probably because the child <li>'s are using the parent <ul>'s font size to scale off of instead of the browsers default font size of 16px so of course 100% or 1em of 0 is of course 0.

which brings me nicely to my next question, assuming that my understanding of what is going on is correct how then would you get the child <li>'s to scale off of the browser default font size of 16px of instead of the parent <ul>'s font size of 0

can I use rem's maybe ? and if so how because again I'm not totally clear on how rem's work.

[Frenzie]

using fixed size fonts is generally consider bad practice from a usability stand point, as it prevents users resizing the text.

Pixels are a relative unit (see, e.g., here). That resizing thing is more of an IE6 bug.

now I'm assuming its probably because the child <li>'s are using the parent <ul>'s font size to scale off of instead of the browsers default font size of 16px so of course 100% or 1em of 0 is of course 0.

Yup. But of course that's easier to test and see by using a value like 1.2em or .8em to see the whole shebang multiplying.

can I use rem's maybe ? and if so how because again I'm not totally clear on how rem's work.

That's correct. Iirc there might be some rem edge cases that don't work right in IE9 wrt generated content (should you care about that browser), but otherwise you can safely use rems.

The way it works is just like ems.

On the root element:
1em = 1rem = 100%
1.1em = 1.1rem = 110%
.8em = .8rem = 80%

The difference is that 1.1 rem always remains 110% of the root element rather than a complex cascade of 110% * 120% * 90% * 150%, which is behavior you probably almost never want. Alas, it's what CSS gave us back in the day.

[Brummelchen]

"inherit" is the magic word.

[Frenzie]

@Brummelchen
If you're referring to something I said, grosso modo inherit is an inelegant workaround for some highly specific scenarios where rem can be helpful.

Code: Select all

div {font-size:1.50em}
/* this'll prevent em multiplication in a highly specific scenario
at best it has to be explicitly added where rem would render it unnecessary */
div div {font-size:inherit}


Sure, it has its place. And sure, we could also question whether the OP is using the right workaround. For example, display:table and display:table-cell should work in IE8+, which obviously includes much older versions of Opera and Firefox. Unless such questioning is implicit in your remark, inheriting a font size of 0 from the parent element isn't very helpful.

Only rems give you elegant scaling of margins, paddings, borders, and font sizes. Since it's 2017 there is generally no reason to disparage use of rems, quite the contrary, but of course you could be stuck in a 2013-like environment where you have to worry about IE9 and IE10.

PS Naturally regular ems/percentages also have their place. But they only become elegant when used as exceptions to rem.