height样式属性在div元素中不起作用 [英] height style property doesn't work in div elements

问题描述

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

任何想法？

 < div style =display：inline; height：20px width ：70px>我的文字Here< / div> 
  

解决方案

/ code>和和 width 用于 display：inline; 。

从 .org / TR / CSS2 / visudet.html＃inline-non-replaced> CSS2规格：

10.6.1内联非替换元素

height 属性不适用。内容区域的高度应基于字体，但此规范不指定如何。 UA可以例如使用电子邮箱或字体的最大上升器和下降器。 （后者将确保具有在em盒之上或之下的部分的字形仍然落在内容区域内，但是导致用于不同字体的不同大小的盒子;前者将确保作者能够相对于行高控制背景样式， ，但导致在其内容区域外绘制字形。）

EDIT—您还缺少 height 属性的; 终止符：

 < div style =display：inline; height：20px width：70px>我的文字Here< / div& 
<！ -  ^^ here  - > 
  

工作范例： http://jsfiddle.net/FpqtJ/

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>

解决方案

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/

这篇关于height样式属性在div元素中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！