CSS height Property

What You’ll Learn

The height property controls how tall an element is on the page. You will learn fixed sizes, percentage sizing, viewport units, and when to let the browser calculate height automatically.

Introduction

The height property in CSS is used to set the height of an element. It lets you define how tall a box should be in absolute terms (such as pixels) or relative terms (such as percentages or viewport units).

Proper use of height is crucial for creating responsive and well-structured web layouts. You will use it on cards, heroes, sidebars, images, and any element where vertical space matters.

Definition and Usage

Apply height to block-level elements, inline-block elements, replaced elements, and flex or grid items. The syntax is simple: choose a length, percentage, keyword, or viewport unit.

📝 Syntax

The syntax for the height property is simple and versatile:

element {
  height: value;
}

Here, value can be any valid length, percentage, keyword, or viewport unit.

Basic Example

.box {
  width: 100px;
  height: 200px;
  background-color: lightblue;
}

Default Value

The default value of the height property is auto, which means the browser calculates height based on content, padding, borders, and other applied styles.

Syntax Rules

• Works on block-level, inline-block, and replaced elements.
• Accepts length units (px, rem, em), percentages, and viewport units (vh, svh).
• The property is not inherited.
• Percentage heights require a parent with an explicit height.
• Pair fixed heights with overflow when content may exceed the box.

💎 Property Values

Understanding Height Units

Choosing the right unit makes layouts easier to maintain. Here is when each type works best:

• px — Best for small UI pieces with a predictable size, such as icons or thumbnail boxes.
• rem / em — Scales with font size, useful for components that should grow with text settings.
• % — Fills part of a parent container. The parent must have a defined height.
• vh — Relative to the viewport height. Common for full-screen hero sections.
• auto — Lets content determine height. Usually the safest default for text blocks.

Examples Gallery

Set fixed pixel heights, percentage heights, full viewport sections, and compare auto against a fixed size.

<style>
  .box {
    width: 100px;
    height: 200px;
    background-color: lightblue;
  }
</style>

<div class="box"></div>

.parent {
  height: 300px;
}

.child {
  height: 50%;
  background-color: #93c5fd;
}

.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auto { height: auto; }
.fixed {
  height: 120px;
  overflow: auto;
}

♿ Accessibility

• Avoid clipping important content — Fixed heights can hide text when users zoom or increase font size.
• Allow content to grow — Prefer min-height over rigid height for text-heavy areas.
• Test keyboard and touch targets — Ensure buttons and links remain reachable inside fixed-height containers.
• Do not rely on height alone for meaning — Visual size should not be the only indicator of importance.
• Check mobile viewports — Full 100vh sections can feel too tall on small screens with browser chrome.

💡 Best Practices