高度样式属性在div元素中不起作用
收藏

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

有任何想法吗?

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

最佳答案

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

根据CSS2规范:

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                       -->

工作示例:http://jsfiddle.net/FpqtJ/

    公众号
    关注公众号订阅更多技术干货!