height

christian.dinh's avatar
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%;
}

All contributors

Contribute to Docs

Learn CSS on Codecademy