CSS

🎨 CSS height Property

The CSS height property is used to define the height (vertical size) of an HTML element.

In other words, it determines how tall a box, image, paragraph, or any other HTML element will be.

📘 Basic Syntax

CSS

height: value;

This property defines the height of an element.

The height value only affects the content area.
padding, border, and margin are added outside of this value.

📘 Possible Values of height

1. auto

This is the default value.

The browser automatically adjusts the height according to the element’s content.

If the content grows, the element’s height increases automatically.

✅ Example

CSS


div {
  height: auto;
}

In this case, the <div> becomes as tall as its content.

2. Fixed Length Values

The height can be set using fixed units such as:

✅ Example

CSS


div {
  height: 200px;
}

Here, the <div> will always be exactly 200px tall.

3. Percentage (%)

The element’s height is defined as a percentage of its parent element’s height.

⚠️ Important: Percentage heights only work if the parent element has a defined height.

✅ Example

CSS


.container {
  height: 400px;
}

.box {
  height: 50%;
}

Here, .box becomes half the height of .container 200px

4. initial

Resets the property to its default value (auto).

✅ Example

CSS


div {
  height: initial;
}

This behaves the same as height: auto

5. inherit

The element inherits the height value from its parent element.

✅ Example

CSS


.container {
  height: 300px;
}

.box {
  height: inherit;
}

In this example, .box will also have a height of 300px

🧩 Practical Example

HTML


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS Height Property</title>
        <style>
            .container {
                height: 400px;
                background-color: lightgray;
                padding: 10px;
            }

            .box1 {
                height: auto;
                background-color: lightcoral;
                margin-bottom: 10px;
            }

            .box2 {
                height: 150px;
                background-color: lightblue;
                margin-bottom: 10px;
            }

            .box3 {
                height: 50%;
                background-color: lightgreen;
            }
        </style>
    </head>
    <body>
        <div class="container">

            <div class="box1">
                height: auto
            </div>

            <div class="box2">
                height: 150px
            </div>

            <div class="box3">
                height: 50%
            </div>

        </div>

    </body>
</html>

CSS Width

CSS Calc