Categories
CSS Web development

CSS height Property

Learn how to use the CSS height Property.



CSS height Property

The CSS height property settles the height of an element.

The CSS min-height and max-height properties override the width property.

Demo:

Click the “Try it” button to change the height of the DIV element:


Example

Note: the height of an element does not include margins, padding and borders.

Syntax:

height: auto|value;

auto (default) – the height is calculated by the browser.

value – specifies the width in px, %, etc (read also Units in CSS).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
  height: 150px;
  width: 200px;
  border: 1px solid #333;  
}

.child {
  height: 50%;
  width: 50%;
  border: 1px solid red;  
}
</style>
</head>
<body>

<div class="parent">
  <div class="child">I'm the 50% height of my parent.</div>
</div>

</body>
</html>

Output:

I’m the 50% height of my parent.

Enjoy coding!

Read also:

CSS background Property

CSS caret-color Property

CSS filter Property