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;
Default Value:
- auto
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:
html
<!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:
html
<!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:
html
<!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 and above
- Edge 12.0 and above
- Internet Explorer 4.0 and above
- Firefox 1.0 and above
- Safari 1.0 and above
- Opera 7.0 and above
Please Login to comment...