CSS height 属性

设置一个段落的高度和宽度：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    img.normal {
      height: auto;
    }

    img.big {
      height: 120px;
    }

    p.ex {
      height: 100px;
      width: 100px;
    }
  </style>
</head>

<body>
  <img class="normal" src="/examples/logocss.gif" width="95" height="84" /><br>
  <img class="big" src="/examples/logocss.gif" width="95" height="84" />
  <p class="ex">这个段落的高和宽是 100px.</p>
  <p>这是段落中的一些文本。这是段落中的一些文本。 这是段落中的一些文本。这是段落中的一些文本。 这是段落中的一些文本。这是段落中的一些文本.
  </p>
</body>
</html>

尝试一下 »

属性定义及使用说明

height属性设置元素的高度。

注意： height属性不包括填充，边框，或页边距！

默认值： auto
继承： no
版本： CSS1
JavaScript 语法： object.style.height="50px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
height 1.0 4.0 1.0 1.0 7.0

属性值

值 描述
auto 默认。浏览器会计算出实际的高度。
length 使用 px、cm 等单位定义高度。
% 基于包含它的块级对象的百分比高度。
inherit 规定应该从父元素继承 height 属性的值。

更多实例

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    html {
      height: 100%;
    }

    body {
      height: 100%;
    }

    img.normal {
      height: auto;
    }

    img.big {
      height: 50%;
    }

    img.small {
      height: 10%;
    }
  </style>
</head>

<body>
  <img class="normal" src="/examples/logocss.gif" width="95" height="84" /><br>
  <img class="big" src="/examples/logocss.gif" width="95" height="84" /><br>
  <img class="small" src="/examples/logocss.gif" width="95" height="84" />
</body>
</html>

尝试一下 »

相关文章

CSS 教程: CSS Dimension

CSS 教程: CSS Box model

CSS 参考手册: width 属性