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;
}
Code: Select all
ul
{
font-size:0;
}
ul li
{
display:inline-block;
font-size:16px;
}
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%;
}
Code: Select all
ul li
{
display:inline-block;
font-size:1em;
}
So my question is why when I do this
Code: Select all
ul
{
font-size:0;
}
ul li
{
display:inline-block;
font-size:100%;
}
Code: Select all
ul
{
font-size:0;
}
ul li
{
display:inline-block;
font-size:1em;
}
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.