CSS | height Property
The height property is used to set the height of an element. The height property does not contains padding and margin and border of element.
Syntax:
height: auto|length|initial|inherit;
Property Values:
-
auto: It is used to set height property to its default value. If the height property set to auto then the browser calculates the height of element.
Syntax:
height: auto;
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
CSS height Property
</
title
>
<
style
>
.Geeks {
height: auto;
color: white;
font-size: 30px;
background-color: green;
}
</
style
>
</
head
>
<
body
>
<
h2
>CSS height Property</
h2
>
<
div
class
=
"Geeks"
>
GeeksforGeeks: A computer science portal
</
div
>
</
body
>
</
html
>
Output:
- length: It is used to set the height of element in form of px, cm etc. The length can not be negative.
Syntax:
height: length;
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
CSS height Property
</
title
>
<
style
>
.Geeks {
height: 100px;
color: white;
font-size: 30px;
background-color: green;
}
</
style
>
</
head
>
<
body
>
<
h2
>CSS height Property</
h2
>
<
div
class
=
"Geeks"
>
GeeksforGeeks: A computer science portal
</
div
>
</
body
>
</
html
>
Output :
- initial: It is used to set height property to its default value.
Syntax:
height: initial;
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
CSS height Property
</
title
>
<
style
>
.Geeks {
height: initial;
color: white;
font-size: 30px;
background-color: green;
}
</
style
>
</
head
>
<
body
>
<
h2
>CSS height Property</
h2
>
<
div
class
=
"Geeks"
>
GeeksforGeeks: A computer science portal
</
div
>
</
body
>
</
html
>
Output:
- inherit: It is used to set height property from its parent element.
Supported Browsers: The browser supported by height property are listed below:
- Google Chrome 1.0
- Internet Explorer 4.0
- Firefox 1.0
- Safari 1.0
- Opera 7.0