The height property in CSS is used to set the height of an element. It helps you control how tall an element should be. You can use fixed values, such as pixels, or flexible values, like percentages, depending on your design needs.

Using the height property can improve the layout and design of your web page by ensuring that elements have the correct vertical dimensions.

Syntax

Follow below syntax to add height in CSS code.

height: value;

Explanation:

• height: Sets the height of an element.
• value: Can be a fixed unit (e.g., 200px), a percentage (e.g., 50%), or other CSS units like em or rem.

Example 1: Fixed Height

In this example, we set a fixed height for a container element. This is useful when you know exactly how tall you want the element to be.

Explanation:

• Container Height:
  • 200px: The container’s height is fixed at 200 pixels.
• Visual Clarity:
  • lightblue: The background color is used to clearly see the container’s height.
• Outcome:
  • The element appears with a consistent height regardless of its content.

Example 2: Percentage Height

In this example, we use percentage values to set the height of an element. This approach makes the element’s height relative to its parent container. For percentage heights to work correctly, the parent element must have a defined height.

Explanation:

• Parent Height:
  • 400px: The parent container has a fixed height to base the percentage on.
• Child Height:
  • 50%: The child element's height is set to 50% of the parent's height.
• Structure Dependency:
  • html & body height: Setting their height to 100% ensures proper calculation for percentage heights.
• Outcome:
  • The child element dynamically adjusts to 50% of the parent's height, making it responsive to changes in the parent container's size.

This lesson shows how to use the CSS height property to control the vertical size of elements. You learned to set both fixed and percentage-based heights to suit different design requirements.