height
Published Jul 13, 2021Updated Sep 3, 2021
Contribute to Docs
Defines the height of an element’s content area. The content area is the space inside the padding, border, and margin of the element.
Syntax
height: <value>;
where <value>
can be one of the following:
- Length values:
100px
- Percentage values:
20%
- Keyword values:
auto
,max-content
,min-content
,fit-content
Note: In the case that box-sizing
is set to border-box
, the height of the element includes the content, padding and border. The height
property will be overwritten by the min-height
, and max-height
properties.
Example 1
Set the height
of the .box
element to be 100px
:
.box {height: 100px;}
Example 2
Set the height
of the .box
element to be 100px
including the padding and the border:
.box {box-sizing: border-box;padding: 20px;border: 2px solid black;height: 100px;}
Example 3
Set the height
of the .child-box
element to be half the height of the .parent-box
element:
<div class="parent-box"><div class="child-box">I am 50% as tall as my parent.</div></div>
.parent-box {border: 2px solid blue;width: 200px;height: 200px;}.child-box {border: 2px solid red;height: 50%;}
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn CSS on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Career path
Full-Stack Engineer
A full-stack engineer can get a project done from start to finish, back-end to front-end.Includes 51 CoursesWith Professional CertificationBeginner Friendly150 hours - Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours