Question

I have the following:

<span id="span_1" style="overflow: auto;">
<span id="span_2" style="font-size: 200px; background-color: red;">Testing</span>
</span>

When I try to get the height of the wrapping span span_1 using jQuery – it gives me 19px. Even though the inner span span_2 has a font-size of 200px and its computed height on firebug is 225px.

Why is the wrapping span not fully wrapping around the inner span?

I am basically trying to find the exact remaining height of a particular element. This element can have many children but I want to know how much height it has left. So the idea is to wrap everything within that element in a span and calculate height using jQuery but so far I don’t understand why the above doesn’t work.

Better ideas? I can’t wrap a div around the contents as it will be effected by line-height.

Answer 1

Try adding display: inline-block; to the parent span.