CSS Height and Width: Complete Guide with Examples

CSS Height and Width

The height and width properties are two of the most important CSS properties for controlling the size of HTML elements. They help you decide how tall and how wide an element should appear on a web page.

You can use them to size containers, images, buttons, sections, cards, forms, navigation areas, and many other elements.

CSS provides several ways to define height and width. You can use fixed units such as px, relative units such as %, viewport units such as vw and vh, and special values such as auto, min-content, max-content, and fit-content.

Understanding these properties is essential for creating responsive and well-structured websites.

What Are CSS Height and Width?

The CSS width property controls the horizontal size of an element.

The CSS height property controls the vertical size of an element.

For example:

.box {
  width: 300px;
  height: 200px;
}

This gives the element a width of 300px and a height of 200px.

HTML:

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

The browser uses these CSS values when calculating the element’s layout.

Basic Syntax

The basic syntax is:

selector {
  width: value;
  height: value;
}

Example:

.container {
  width: 500px;
  height: 300px;
}

Here:

• width: 500px sets the element’s width to 500 pixels.
• height: 300px sets its height to 300 pixels.

CSS Width Property

The width property specifies the width of an element’s content area by default.

Example:

.box {
  width: 400px;
}

The element’s content area will normally be 400 pixels wide.

However, the final visible size can be affected by padding, borders, and the box-sizing property.

CSS Height Property

The height property specifies the height of an element’s content area by default.

Example:

.box {
  height: 250px;
}

The content area will normally be 250 pixels high.

As with width, padding and borders can affect the element’s total rendered size.

Width and Height With Pixels

Pixels (px) are commonly used when a precise size is required.

.card {
  width: 300px;
  height: 200px;
}

Pixels are useful for:

• Icons
• Small UI components
• Fixed-size controls
• Borders and decorative elements
• Certain desktop layouts

However, fixed pixel dimensions are not always ideal for responsive websites.

A 1200px-wide container may fit comfortably on a desktop but cause horizontal scrolling on a small mobile screen.

Width and Height With Percentages

Percentages allow an element’s size to be calculated relative to a containing block or relevant reference size.

Example:

.container {
  width: 80%;
}

The container will generally occupy 80% of its containing block’s width.

You can also use percentages for height:

.container {
  height: 50%;
}

Percentage heights require special attention. For a percentage height to resolve as expected, the containing block usually needs a definite height.

For example:

html,
body {
  height: 100%;
}

.container {
  height: 50%;
}

Here, the percentage height has a definite reference through the root and body elements.

The auto Value

auto is one of the most useful values for height and width.

For width:

.box {
  width: auto;
}

For height:

.box {
  height: auto;
}

The exact behavior of auto depends on the element, formatting context, and other layout properties.

For a normal block element, height: auto generally allows the height to be determined by its content and layout.

This is why the following is common:

.card {
  width: 100%;
  height: auto;
}

It allows the card to adapt naturally to its content.

Width: 100%

A common CSS pattern is:

.container {
  width: 100%;
}

This tells the element to use the available width of its containing block, subject to other layout constraints.

However, width: 100% combined with padding and borders can sometimes make an element wider than expected under the default content-box sizing model.

For example:

.box {
  width: 100%;
  padding: 20px;
}

With the default box-sizing: content-box, the declared width applies to the content area, so padding is added outside that width.

A common solution is:

.box {
  width: 100%;
  box-sizing: border-box;
}

max-width

The max-width property prevents an element from becoming wider than a specified value.

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

This is extremely useful for responsive layouts.

On a large screen, the container can grow up to 1200px.

On a smaller screen, it can shrink to fit the available space.

A common centered layout is:

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

min-width

The min-width property specifies the minimum width an element can have.

.box {
  min-width: 200px;
}

The element should not become narrower than 200px, subject to layout constraints and other CSS rules.

Be careful with large min-width values on mobile devices because they can cause horizontal overflow.

max-height

The max-height property limits how tall an element can become.

.box {
  max-height: 400px;
}

If the content requires more height, the content may overflow unless another property such as overflow controls it.

For example:

.box {
  max-height: 300px;
  overflow: auto;
}

This creates a scrollable area when the content becomes taller than 300px.

min-height

The min-height property specifies the minimum height of an element.

.card {
  min-height: 250px;
}

This is useful when you want several cards or sections to have a minimum visual height while still allowing them to grow when necessary.

Width and Height Constraints

CSS provides three important constraint properties:

min-width
max-width
min-height
max-height

They work alongside width and height.

For example:

.box {
  width: 100%;
  min-width: 200px;
  max-width: 600px;
}

This means the element should generally remain between 200px and 600px wide.

Similarly:

.box {
  height: 300px;
  min-height: 200px;
  max-height: 500px;
}

The browser resolves the final used size according to these constraints and the surrounding layout.

CSS Viewport Units

Viewport units are useful for responsive designs.

vw

vw means viewport width.

.box {
  width: 50vw;
}

50vw represents 50% of the viewport width.

vh

vh means viewport height.

.box {
  height: 50vh;
}

50vh represents 50% of the viewport height.

vmin

vmin is based on the smaller viewport dimension.

.box {
  width: 50vmin;
}

vmax

vmax is based on the larger viewport dimension.

.box {
  width: 50vmax;
}

Modern CSS also provides newer viewport units such as svh, lvh, and dvh, which can be particularly useful on mobile devices where browser interface elements change the effective viewport.

For example:

.hero {
  min-height: 100dvh;
}

dvh represents the dynamic viewport height and can help a full-screen section respond better to changing mobile browser UI.

CSS em and rem Units

Relative units are useful for flexible designs.

em

em is relative to the font size of the relevant element or inherited context, depending on the property.

.box {
  width: 20em;
}

Its computed size depends on the applicable font size.

rem

rem is relative to the root element’s font size.

.box {
  width: 30rem;
}

Using rem can make sizing more predictable across a design system.

The ch Unit

The ch unit is based on the width of the 0 glyph of the element’s font.

It is especially useful for controlling text line length.

.article {
  max-width: 70ch;
}

This can create a comfortable reading width without relying on a fixed pixel value.

The ex Unit

The ex unit is related to the x-height of the current font.

It is less commonly used than rem, em, %, px, vw, and vh.

Example:

.box {
  width: 40ex;
}

The auto Height Pattern

For content-driven components, avoid forcing a fixed height when it is unnecessary.

Instead of:

.card {
  height: 200px;
}

you may prefer:

.card {
  min-height: 200px;
  height: auto;
}

The card can then grow if its content needs more space.

This is particularly useful for:

• Blog cards
• Product descriptions
• Forms
• FAQ sections
• Responsive layouts

Fixed Height and Overflow

A fixed height can cause problems when content becomes larger than expected.

Example:

.box {
  height: 100px;
}

If the content needs 200px of vertical space, it may overflow.

You can control this with the overflow property.

.box {
  height: 100px;
  overflow: auto;
}

Common values include:

overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;

auto is often useful when you want scrolling only when necessary.

box-sizing and Width/Height

One of the most important concepts when working with dimensions is box-sizing.

By default, elements generally use:

box-sizing: content-box;

With content-box, the declared width and height apply to the content box. Padding and borders are added outside those dimensions.

For example:

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid;
}

The horizontal outer size can become:

300px + 20px + 20px + 5px + 5px = 350px

With:

.box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid;
}

the declared 300px includes the content, padding, and border.

A popular global pattern is:

*,
*::before,
*::after {
  box-sizing: border-box;
}

This often makes layout calculations easier and more predictable.

Width and Height of Images

Images can become distorted if width and height are set independently.

For example:

img {
  width: 300px;
  height: 200px;
}

If the original image has a different aspect ratio, it may appear stretched.

A better approach is often:

img {
  width: 100%;
  height: auto;
}

This allows the browser to preserve the image’s intrinsic aspect ratio.

For a fixed-size image area, object-fit can be useful:

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

Common object-fit values include:

• fill
• contain
• cover
• none
• scale-down

aspect-ratio

The aspect-ratio property lets you define a preferred width-to-height relationship.

Example:

.video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

This is excellent for:

• Video containers
• Image cards
• Thumbnails
• Responsive media
• Product images

For example:

.card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

The browser can maintain the desired proportion as the width changes.

min(), max(), and clamp()

Modern CSS provides powerful functions for responsive sizing.

min()

.container {
  width: min(90%, 1200px);
}

This means the width will use the smaller applicable value.

max()

.container {
  width: max(300px, 50%);
}

This ensures the calculated width does not fall below the selected minimum expression.

clamp()

clamp() is especially useful for responsive dimensions.

.heading {
  width: clamp(300px, 80%, 900px);
}

The value has three parts:

clamp(minimum, preferred, maximum)

Another example:

.hero {
  min-height: clamp(400px, 70vh, 800px);
}

This allows the size to scale while remaining within defined limits.

CSS Height and Width With Flexbox

Flexbox provides additional ways to control the size of elements.

Example:

.container {
  display: flex;
}

.item {
  flex: 1;
}

The available space can be distributed between flex items.

You can also combine Flexbox with minimum and maximum dimensions:

.item {
  flex: 1 1 300px;
  min-width: 0;
}

The min-width: 0 rule can be important when a flex item contains long content that would otherwise prevent it from shrinking as expected.

CSS Height and Width With Grid

CSS Grid provides another powerful layout system.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

The fr unit distributes available grid space.

For example:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

The second column receives approximately twice the available flexible space of the first column, subject to grid sizing rules.

Grid can also use functions such as:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

This is a useful pattern for responsive card layouts.

min-height: 100vh

A common technique for creating a page section that fills at least the viewport height is:

main {
  min-height: 100vh;
}

For modern responsive interfaces, you may also consider:

main {
  min-height: 100dvh;
}

The dynamic viewport unit can better reflect the visible viewport on many mobile browsers.

Width of Block Elements

Block-level elements normally occupy the available horizontal space when their width is auto.

For example:

div {
  width: auto;
}

A block element can generally stretch to fill the available inline space, subject to margins, padding, borders, and layout constraints.

If you explicitly set:

div {
  width: 500px;
}

the element no longer automatically fills the available width in the same way.

Width of Inline Elements

Width and height do not behave the same way on ordinary inline elements.

For example:

span {
  width: 300px;
  height: 100px;
}

A normal inline span does not generally accept width and height in the same way a block or inline-block element does.

You can use:

span {
  display: inline-block;
  width: 300px;
  height: 100px;
}

Now the element participates as an inline-level box while accepting width and height.

Percentage Height Problems

One of the most common beginner problems is:

.child {
  height: 100%;
}

but the child does not become as tall as expected.

This often happens because the parent’s height is not explicitly definite.

For example:

.parent {
  height: 500px;
}

.child {
  height: 100%;
}

Now the child has a clear reference height.

For layouts that simply need to fill available space, Flexbox or Grid can often be a better solution than manually assigning percentage heights.

min-height Versus height

There is an important difference between these properties.

height: 300px;

sets a specified height, although the final used size can still be affected by layout constraints.

Whereas:

min-height: 300px;

establishes a minimum and allows the element to grow when needed.

For content-heavy sections, min-height is often safer.

max-width for Readable Content

Very wide text blocks can become difficult to read.

Instead of allowing an article to stretch across the entire screen:

.article {
  width: 100%;
}

you can limit its maximum width:

.article {
  width: 100%;
  max-width: 70ch;
  margin-inline: auto;
}

This can improve readability, especially on large screens.

Responsive Widths

Responsive design means that an element should adapt to different screen sizes.

A simple example is:

.container {
  width: 90%;
  max-width: 1200px;
  margin-inline: auto;
}

On smaller screens, the container becomes narrower.

On larger screens, it stops growing at 1200px.

This is generally more flexible than:

.container {
  width: 1200px;
}

Responsive Height

Avoid using fixed heights for large content sections unless the design genuinely requires them.

Instead of:

.section {
  height: 600px;
}

consider:

.section {
  min-height: 600px;
}

or:

.section {
  min-height: 60vh;
}

The correct choice depends on the content and design requirements.

Common Mistakes With Height and Width

Using Fixed Widths Everywhere

This can cause horizontal scrolling on small screens.

Avoid:

.container {
  width: 1200px;
}

when a responsive layout is required.

Prefer:

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

Setting Fixed Heights for Text

Text can wrap differently on different devices.

A fixed height can cause clipping or overflow.

Prefer min-height or height: auto when appropriate.

Forgetting box-sizing

Padding and borders can make an element larger than expected.

Using:

box-sizing: border-box;

often makes dimension calculations easier.

Using height: 100% Without a Definite Parent Height

Percentage heights depend on the containing block.

Check the parent dimensions or use Flexbox/Grid where appropriate.

Ignoring Overflow

A fixed dimension combined with large content can create unwanted overflow.

Use appropriate overflow handling when necessary.

Practical Example

Here is a responsive card:

.card {
  width: 100%;
  max-width: 400px;
  min-height: 250px;
  padding: 20px;
  box-sizing: border-box;
  margin-inline: auto;
}

This card:

• Can shrink on small screens.
• Will not grow beyond 400px.
• Has at least 250px of height.
• Includes padding within its declared width.
• Can be centered using automatic inline margins.

A Responsive Container Example

.container {
  width: min(90%, 1200px);
  margin-inline: auto;
}

This is a compact and modern way to create a responsive container.

A more traditional version is:

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

Both approaches can be useful.

Best Practices for CSS Height and Width

Keep these principles in mind:

1. Use responsive units when appropriate.
2. Prefer max-width for large content containers.
3. Use min-height when content may grow.
4. Avoid unnecessary fixed heights.
5. Use box-sizing: border-box when it makes sizing easier to reason about.
6. Use height: auto for responsive images.
7. Use aspect-ratio for predictable media proportions.
8. Use clamp() for fluid sizing with limits.
9. Test layouts on both small and large screens.
10. Check for horizontal overflow.
11. Remember that percentage heights need an appropriate reference.
12. Use Flexbox or Grid when the layout itself should control available space.
13. Keep text containers reasonably narrow for readability.
14. Use modern viewport units carefully for full-screen mobile layouts.
15. Do not assume one fixed dimension will work for every device.

Height and Width: Quick Comparison

Common CSS Units for Height and Width

Final Thoughts

CSS height and width look simple, but they are closely connected to the CSS box model, responsive design, Flexbox, Grid, overflow, viewport units, and content size.

For simple components, fixed units such as px can be perfectly appropriate. For responsive layouts, however, combinations such as width: 100%, max-width, min-height, percentages, viewport units, clamp(), and aspect-ratio are often more useful.

A good modern approach is to let content determine height whenever possible, limit excessive width with max-width, use flexible layouts for available space, and apply constraints rather than forcing every element into a fixed size.

Once you understand how width, height, min-width, max-width, min-height, max-height, and box-sizing work together, you can create layouts that are more flexible, accessible, responsive, and easier to maintain.