Question

I created the following HTML CSS Code:

<div class="Pager">
  <span class="Resume">Posts 1 to 40 of 220X</span>
  <ul class="Buttons">
    <li><span>123</span></li>
  </ul>
  <div class="Clear"></div>
</div>

.Class {clear: both;}

div.Pager {}

div.Pager span.Resume {
  font-family: Arial;
  font-size: 0.9em;
  line-height: 1;
  float: left;
}

div.Pager ul.Buttons {
  float: left;    
}

div.Pager ul.Buttons li {
  float: left;   
}

div.Pager ul.Buttons li span {
  font-family: Arial;
  font-size: 0.9em;
  line-height: 1;
}

Does anyone knows why the “123” text appears lower then the previous text?

Thank You,
Miguel

Answer 1

Move your “font style setting CSS” to the outermost element (div.Pager), and have it only on that element so you’re not needlessly redefining the same thing:

http://jsfiddle.net/thirtydot/85AKq/9/

This works because font-family, font-size, line-height are all inheritable – the descendants can inherit those properties from the parent element.

---

I’m pretty sure this is irrelevant, but to make it work when “Normalized CSS” is turned off in jsFiddle, add margin: 0; padding: 0; list-style: none to your ul:

http://jsfiddle.net/thirtydot/85AKq/10/