css - 高度样式属性在 div 元素中不起作用

Question

我在 <div> 上设置了 20px 的高度，虽然当它在浏览器中呈现时，它只有 14 像素高。

有什么想法吗？

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

Answer 1

您不能为具有display:inline; 的元素设置height 和width。请改用 display:inline-block;。

来自 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.)

编辑 — 您还缺少 ; height 属性的终止符:

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

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