The width and height properties set an element's explicit size, accepting fixed units like pixels, relative units like percentages, or special keywords like auto, min-content, and max-content.

Syntax

width: value;
height: value;

Deep Dive Course

A percentage width is calculated relative to the width of the element's containing block, its parent, in normal flow, while a percentage height is calculated relative to the parent's height only if that parent has an explicitly defined height itself, otherwise a percentage height typically has no effect and the element's height instead simply grows to fit its content. min-width/max-width and min-height/max-height set additional constraints that cap or floor an element's size, taking priority over a conflicting width/height value, which is especially useful for responsive designs, letting an element grow or shrink within defined bounds rather than a single rigid, fixed size.

1Understanding Dimensions

💡

A percentage height on a child element only works reliably if its parent has an explicitly set height, whether fixed or itself a percentage resolving to a defined value further up the chain — without that, a percentage height typically computes to nothing and has no effect, a common, confusing gotcha compared to how percentage widths behave.

editor.html

.container {
  width: 100%;
  max-width: 1200px;
}

localhost:3000

2Practical Example

Here is a real-world application of Dimensions showing how it is used in production CSS code.

editor.html

.parent {
  height: 300px;
}

.child {
  height: 50%;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Dimensions:

1. Use max-width, often paired with width: 100%, for responsive elements that should shrink on small screens but never exceed a certain size on larger ones

2. Ensure a parent element has an explicitly defined height before relying on a percentage height on its children, since percentage heights typically don't work without one

3. Prefer min-content or max-content over a hardcoded pixel width when you want an element to size itself intrinsically based on its actual content

⚠️

Tip: A percentage height on a child element only works reliably if its parent has an explicitly set height, whether fixed or itself a percentage resolving to a defined value further up the chain — without that, a percentage height typically computes to nothing and has no effect, a common, confusing gotcha compared to how percentage widths behave.

editor.html

.container {
  width: 100%;
  max-width: 1200px;
}

localhost:3000

Examples

Example 01Basic Usage

.container {
  width: 100%;
  max-width: 1200px;
}

Example 02Advanced Example

.parent {
  height: 300px;
}

.child {
  height: 50%;
}

Best Practices

Use max-width, often paired with width: 100%, for responsive elements that should shrink on small screens but never exceed a certain size on larger ones
Ensure a parent element has an explicitly defined height before relying on a percentage height on its children, since percentage heights typically don't work without one
Prefer min-content or max-content over a hardcoded pixel width when you want an element to size itself intrinsically based on its actual content

Interview Question

Why does setting height: 50% on a child element often have no visible effect at all, unlike setting width: 50%, which almost always works as expected?▼

Hint: Think about what a percentage width and a percentage height are each actually calculated relative to, and whether that reference value is reliably available in each case.

A percentage width is calculated relative to its containing block's width, and in normal document flow, a block-level parent's width is essentially always resolvable to some definite pixel value, since block elements naturally default to filling the available width of their own parent unless told otherwise, giving percentage width calculations a reliable reference value to work from in virtually every case. A percentage height, by contrast, is calculated relative to its parent's height, but a parent's height, unlike its width, is not automatically defined by default, a typical block element's height simply grows to fit whatever content it contains, rather than being determined by its own parent's height the way width is — this means that unless a parent's height has been explicitly set to some definite value, whether a fixed pixel amount or a percentage that itself resolves all the way up to something concrete, there's no definite reference height for a percentage height on a child to calculate against, so it typically computes to nothing and has no visible effect at all. This asymmetry between how width and height percentages behave is one of the most common points of confusion for developers newer to CSS layout.

Exercises

MediumPractice using Dimensions in a real scenario.

View Solution

.container {
  width: 100%;
  max-width: 1200px;
}

Frequently Asked Questions

Why does setting height: 50% on a child element often have no visible effect at all, unlike setting width: 50%, which almost always works as expected?▼

Related Functions

Box-sizingPaddingMargin