CSS height 属性 · W3School CSS 参考手册

# CSS height 属性 ## 实例设置段落的高度和宽度： ``` p { height:100px; width:100px; } ``` ## 浏览器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有主流浏览器都支持 height 属性。注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。 ## 定义和用法 height 属性设置元素的高度。 ### 说明这个属性定义元素内容区的高度，在内容区外面可以增加内边距、边框和外边距。行内非替换元素会忽略这个属性。 | 默认值： | auto | | --- | --- | | 继承性： | no | | --- | --- | | 版本： | CSS1 | | --- | --- | | JavaScript 语法： | _object_.style.height="50px" | | --- | --- | ## 可能的值 | 值 | 描述 | | --- | --- | | auto | 默认。浏览器会计算出实际的高度。 | | _length_ | 使用 px、cm 等单位定义高度。 | | _%_ | 基于包含它的块级对象的百分比高度。 | | inherit | 规定应该从父元素继承 height 属性的值。 | ## TIY 实例 [使用像素值设置图像的高度](/tiy/t.asp?f=csse_dim_height) 本例演示如何使用像素值设置元素的高度。 ``` <html> <head> <style type="text/css"> img.normal { height: auto } img.big { height: 160px } img.small { height: 30px } </style> </head> <body> <img class="normal" src="/i/eg_smile.gif" /> <br /> <img class="big" src="/i/eg_smile.gif" /> <br /> <img class="small" src="/i/eg_smile.gif" /> </body> </html> ``` [使用百分比设置图像的高度](/tiy/t.asp?f=csse_dim_height_percent) 本例演示如何使用百分比值来设置元素的高度。 ``` <html> <head> <style type="text/css"> img.normal { height: auto } img.big { height: 50% } img.small { height: 10% } </style> </head> <body> <img class="normal" src="/i/eg_smile.gif" /> <br /> <img class="big" src="/i/eg_smile.gif" /> <br /> <img class="small" src="/i/eg_smile.gif" /> </body> </html> ``` ## 相关页面 CSS 教程：[CSS 尺寸](/css/css_dimension.asp "CSS 尺寸 (Dimension)") CSS 教程：[CSS 框模型概述](/css/css_boxmodel.asp "CSS 框模型概述") CSS 参考手册：[width 属性](/cssref/pr_dim_width.asp "CSS width 属性") HTML DOM 参考手册：[height 属性](/jsref/prop_style_height.asp "HTML DOM height 属性")