CSS Height

CSS height property is used to set height of the content area of an element.

• The height of an element does not include padding, borders, margins.
• The min-height and max-height properties override height.

Height Syntax

height: value [auto | lenght | initial | inherit];

CSS Height: Parameters

• length: Defines the height absolute value
• fixed: Defines the height fixed value in pixels, em, etc.
• percentage: Defines the height value in percentage
• auto: The browser will calculate the height for the element
• inherit: Element will inherit the height from its parent element

Example: Height Auto

.div_1 {
     border: 1px solid green;
     height: auto;
  }

Output

Example: Height 100px

.div_1 {
     border: 1px solid green;
     height: 100px;
  }

Output

Example: Child & Parent Element

#parent {
     border: 1px solid green;
     height: 100px;
     width: 300px;
  }

#child {
     border: 1px solid pink;
     height: 50%px;
     width: 75%;
  }

Output