height属性用于设置元素的高度。 height属性不包含元素的填充, 边距和边框。 height属性包含许多定义元素高度的值。下面列出了height属性值：
语法如下：
height: length|percentage|auto|initial|inherit;属性值：
- 高度：自动；用于将height属性设置为其默认值。如果height属性设置为auto, 则浏览器将计算元素的高度。
- 高度：长度；用于以px, cm等形式设置元素的高度。长度不能为负数。
- 高度：初始；用于将height属性设置为其默认值。
- 高度：继承；它用于从其父元素设置height属性。
范例1：这个例子使用height：auto;属性以显示内容。
<!DOCTYPE html>
< html >
< head >
<!-- style to set height property to
display content -->
< style >
p {
color:white;
}
.main {
background-color:black;
height:auto;
border-radius: 20px 20px 0px 0px;
}
.left-column {
background-color:indigo;
height:120px;
width:49%;
float:left;
border-bottom-left-radius: 20px;
}
.right-column{
background-color:green;
height:7.5em;
width:49%;
float:right;
border-bottom-right-radius: 20px;
}
h1{
color:Green;
}
</ style >
</ head >
< body >
< center >
< h1 >lsbin</ h1 >
< div class = "main" >
< p >
Also, any geeks can help other geeks by writing
articles on the lsbin, publishing articles
follow few steps that are Articles that need
little modification/improvement from reviewers
are published first. To quickly get your articles
reviewed, please refer existing articles, their
formatting style, coding style, and try to make
you are close to them.
</ p >
</ div >
< div class = "left-column" >
< p >
It is a good platform to learn programming. It
is an educational website. Prepare for the
Recruitment drive of product based companies
like Microsoft, Amazon, Adobe etc with a free
online placement preparation course.
</ p >
</ div >
< div class = "right-column" >
< p >
The course focuses on various MCQ's & Coding
question likely to be asked in the interviews
& make your upcoming placement season efficient
and successful.
</ p >
</ div >
</ center >
</ body >
</ html >输出如下
范例2：该示例使用height：Inherited属性显示内容。
<!DOCTYPE html>
< html >
< head >
<!-- CSS style to set height property of content -->
< style >
.auto {
height:auto;
background-color:orange;
}
.inherit {
height:inherit;
background-color:cyan;
}
.percentage {
height:25%;
}
h1 {
color:green;
}
</ style >
</ head >
< body style = "text-align:center;" >
< h1 >lsbin</ h1 >
< div class = "auto" >
< p >
Also, any geeks can help other geeks by writing
articles on the lsbin, publishing articles
follow few steps that are Articles that need
little modification/improvement from reviewers
are published first. To quickly get your articles
reviewed, please refer existing articles, their
formatting style, coding style, and try to make
you are close to them.
</ p >
< div class = "inherit" >
< p >
It is a good platform to learn programming. It
is an educational website. Prepare for the
Recruitment drive of product based companies
like Microsoft, Amazon, Adobe etc with a free
online placement preparation course.
</ p >
</ div >
< div class = "percentage" >
< p >
The course focuses on various MCQ's & Coding
question likely to be asked in the interviews
& make your upcoming placement season efficient
and successful.
</ p >
</ div >
</ div >
</ body >
</ html >输出如下：
