CSS width Property

What You’ll Learn

The width property controls how wide an element is on the page. You will learn fixed sizes, percentage sizing, responsive limits, and when to let the browser calculate width automatically.

Introduction

The width property in CSS is used to set the width of an element. This property can be applied to various HTML elements including divs, images, tables, and more.

By specifying the width, you can control how much horizontal space an element should occupy on the page, making it a fundamental tool for layout design in web development.

Definition and Usage

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

📝 Syntax

The syntax for the width property is simple and straightforward. You can specify the width using various units such as pixels, percentages, ems, and more.

element {
  width: auto | <length> | <percentage> | max-content | min-content | fit-content;
}

Here, the value can be a length (e.g., 100px, 50%, 10em), or keywords such as auto, max-content, min-content, fit-content, or inherit.

Basic Example

.box {
  width: 200px;
  height: 100px;
  background: #93c5fd;
}

Syntax Rules

• Length values use units like px, rem, em, or vw.
• Percentages are relative to the containing block’s width.
• auto lets the browser decide based on content and layout context.
• Pair with max-width for responsive designs that do not overflow.
• The property is not inherited.

Related Properties

• height — sets vertical size
• max-width — upper width limit for responsive layouts
• min-width — minimum width before overflow
• box-sizing — includes padding and border in width calculations

🎯 Default Value

The default value of the width property is auto. When set to auto, the width of the element is determined by the content inside it, the element’s display type, and the available space in its container.

💎 Property Values

The width property accepts lengths, percentages, and keyword values.

When to Use width

width is one of the most common layout properties:

• Cards and panels — Set readable widths with max-width for responsive layouts.
• Columns and sidebars — Use percentages or fixed pixels for grid-like structures.
• Images and media — Constrain media with width: 100% inside containers.
• Buttons and chips — Use fit-content or auto for content-sized controls.
• Data tables — Assign column widths for consistent alignment.

Examples Gallery

In this example, we’ll set the width of a div element to 200 pixels.

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

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

.parent { width: 100%; max-width: 20rem; }
.child { width: 50%; }

.card {
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
}

.auto { width: auto; display: inline-block; }
.fixed { width: 160px; }

♿ Accessibility

• Allow text to reflow — Avoid fixed widths that force horizontal scrolling when users zoom in.
• Use max-width for readability — Long lines of text are harder to read; cap content width around 60–75 characters when possible.
• Test on small screens — Percentage and fixed widths should not clip essential content or controls.
• Do not rely on width alone for touch targets — Buttons still need adequate padding and height for usability.

width + max-width + box-sizing

A reliable responsive pattern sets full width with a cap, and includes padding in the width calculation:

.container {
  box-sizing: border-box;
  width: 100%;
  max-width: 72rem;
  padding: 0 1rem;
  margin: 0 auto;
}

💡 Best Practices