height

Published Jul 13, 2021Updated Sep 3, 2021

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>;

to clipboardCopy to clipboard

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;
}

to clipboardCopy to clipboard

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;
}

to clipboardCopy to clipboard

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>

to clipboardCopy to clipboard

.parent-box {
  border: 2px solid blue;
  width: 200px;
  height: 200px;
}

.child-box {
  border: 2px solid red;
  height: 50%;
}

to clipboardCopy to clipboard