CSS height 属性

实例

设置段落的高度和宽度：

  1. p
  2.   {
  3.   height:100px;
  4.   width:100px;
  5.   }

浏览器支持


IE Firefox Chrome Safari Opera
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 属性的值。

实例

使用像素值设置图像的高度

本例演示如何使用像素值设置元素的高度。 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. img.normal 
  5. {
  6. height: auto
  7. }
  9. img.big 
  10. {
  11. height: 160px
  12. }
  14. img.small 
  15. {
  16. height: 30px
  17. }
  18. </style>
  19. </head>
  20. <body>
  22. <img class="normal" src="/uploads/projects/cssref/uploads/projects/cssref/uploads/projects/cssref/i/eg_smile.gif" />
  23. <br />
  24. <img class="big" src="/uploads/projects/cssref/uploads/projects/cssref/uploads/projects/cssref/i/eg_smile.gif" />
  25. <br />
  26. <img class="small" src="/uploads/projects/cssref/uploads/projects/cssref/uploads/projects/cssref/i/eg_smile.gif" />
  28. </body>
  29. </html>

使用百分比设置图像的高度

本例演示如何使用百分比值来设置元素的高度。 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. img.normal 
  5. {
  6. height: auto
  7. }
  9. img.big 
  10. {
  11. height: 50%
  12. }
  14. img.small 
  15. {
  16. height: 10%
  17. }
  18. </style>
  19. </head>
  20. <body>
  22. <img class="normal" src="/uploads/projects/cssref/uploads/projects/cssref/uploads/projects/cssref/i/eg_smile.gif" />
  23. <br />
  24. <img class="big" src="/uploads/projects/cssref/uploads/projects/cssref/uploads/projects/cssref/i/eg_smile.gif" />
  25. <br />
  26. <img class="small" src="/uploads/projects/cssref/uploads/projects/cssref/uploads/projects/cssref/i/eg_smile.gif" />
  28. </body>
  29. </html>

相关页面

CSS 教程：CSS 尺寸

CSS 教程：CSS 框模型概述

CSS 参考手册：width 属性

HTML DOM 参考手册：height 属性