height style property doesn't work in div elements

Question

I'm setting a height of 20px on a <div>, though when it renders in the browser, its only 14px high.

Any ideas?

<div style="display:inline; height:20px width: 70px">My Text Here</div>

Answer 1

You cannot set height and width for elements with display:inline;. Use display:inline-block; instead.

From the CSS2 spec:

10.6.1 Inline, non-replaced elements

The height property does not apply. The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font. (The latter would ensure that glyphs with parts above or below the em-box still fall within the content area, but leads to differently sized boxes for different fonts; the former would ensure authors can control background styling relative to the 'line-height', but leads to glyphs painting outside their content area.)

EDIT — You're also missing a ; terminator for the height property:

<div style="display:inline; height:20px width: 70px">My Text Here</div> <!--                                  ^^ here                       --> 

Working example: http://jsfiddle.net/FpqtJ/

Answer 2

This worked for me:

min-height: 14px; height: 14px; 

Answer 3

Set positioning to absolute. That will solve the problem immediately, but might cause some problems in layout later. You can always figure out a way around them ;)

Example:

position:absolute;

Answer 4

Also, make sure you add ";" to each style. Your excluding them from width and height and while it might not be causing your specific problem, it's important to close it.

<div style="height:20px; width: 70px;">My Text Here</div>