Geek Answers Handbook

CSS Inheritance and em units not displaying properly

I have HTML

<ul>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
</ul>

And some css

body {font-size:2em}
li {font-size:60%}
li:nth-child(2){font-size:inherit}

And everything's good

enter image description here

If I replace the font size li with em unit , inheritance is interrupted

body {font-size:2em}
li {font-size:1em}
li:nth-child(2){font-size:inherit}

enter image description here

What, dear gods of css, can this cause?

See the fiddle here, http://jsfiddle.net/3ho1uc3u/

+4
source share
2 answers

In CSS, if you specify a relative unit, it defaults to the size you inherit from. In your case, if you use 1em, you can set the font size: 100%.

li {font-size:0.6em}


body {font-size:2em}
li {font-size:0.6em}
li:nth-child(2){font-size:inherit}
<ul>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
</ul>
Run code

EMs , 1em .6em 60% ( , 1.2em 120% ).

+15

1em - .

, 2em , 1em, li, 2em , body ( 16px .)

body           {font-size:2em}
li             {font-size:1em}     /* will be 2em of the inherited size by body*/
li:nth-child(2){font-size:inherit} /* will be 2em of the inherited size by body*/

li .

1 ( 1em) 2em, 2em .

+1

More articles:


All Articles