How to calculate the height of an inline element

Question

I have a span element with the following CSS:

span.test {
  font-size: 20px;
  line-height: 1;
}

Why the calculated height of

Answer 1

I used JS Bin http://jsbin.com/siqabekoloja/1/edit to solve your issue. I was able to get it consistent in IE, Chrome and Firefox. I believe the problem is you need the element to be block not an inline element .

Hope this helps. If you want them to be next to each other just float them left or right.