CSS Reference
width & height
Controls the dimensions of an element. The foundation of every layout decision.
Last updated: October 2026
Definition: The width and height properties set the dimensions of an element's content box. By default, padding and border add to these dimensions. Setting box-sizing: border-box includes them inside the declared size.
🎬 Live Example
Five ways to size an element, side by side.
💡 max-width is the responsive standard. Avoid fixed widths when you want elements to scale.
Basic Syntax
.box {
width: 300px;
height: 200px;
}
.responsive {
max-width: 800px; /* Never wider than 800px */
width: 100%; /* Fills parent if narrower */
}🎯 All Sizing Properties
| Property | Purpose |
|---|---|
width | Horizontal size of the content box. |
height | Vertical size of the content box. |
min-width | Minimum width. Element never shrinks below this. |
max-width | Maximum width. Element never grows above this. |
min-height | Minimum height. |
max-height | Maximum height. |
aspect-ratio | Locks the ratio between width and height. |
box-sizing | Whether padding/border are included in width. |
width vs max-width — The Responsive Rule
Prefer max-width over width for responsive design.
/* ❌ Fixed width — breaks on mobile */
.container {
width: 800px;
}
/* ✅ Responsive — shrinks on mobile */
.container {
width: 100%;
max-width: 800px;
margin: 0 auto;
}The responsive version fills its parent on mobile, caps at 800px on desktop, and centers with margin: 0 auto.
width Units Cheatsheet
| Unit | Meaning |
|---|---|
px | Absolute pixels. Predictable but not responsive. |
% | Percentage of the parent. |
rem | Relative to root font-size. Good for accessibility. |
vw | 1% of viewport width. |
vh | 1% of viewport height. |
ch | Width of the "0" character in the current font. Great for text containers (65ch is a common reading-width value). |
fit-content | Shrinks to fit content, caps at container width. |
min-content | Smallest width without overflow. |
max-content | Width that fits all content on one line. |
auto | Let the browser decide (default). |
box-sizing — The Layout Saver
The single most impactful CSS rule for predictable layouts.
/* The universal reset — put this at the top of every stylesheet */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Now width includes padding and border */
.card {
width: 300px;
padding: 20px;
border: 2px solid;
/* Total width: 300px (not 344px) */
}Without border-box, an element with width: 300px; padding: 20px; border: 2px would actually be 344px wide. This breaks layouts.
Full-Height Sections
Making sections fill the viewport height correctly is trickier than it looks.
/* Classic: fills viewport height */
.hero {
min-height: 100vh;
}
/* Modern: handles mobile browser UI correctly */
.hero {
min-height: 100dvh; /* dvh = dynamic viewport height */
}
/* Full-screen layout with header and footer */
.layout {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}💡 Why dvh? On mobile, 100vh includes the browser address bar even when it's hidden, causing content to be cut off. 100dvh adjusts dynamically. Supported in all modern browsers since 2022.
aspect-ratio — Fixed Proportions
/* 16:9 video container */
.video {
aspect-ratio: 16 / 9;
width: 100%;
}
/* Square avatar */
.avatar {
aspect-ratio: 1;
width: 60px;
}
/* Card with consistent proportions */
.card-image {
aspect-ratio: 4 / 3;
object-fit: cover;
width: 100%;
}aspect-ratio is the modern replacement for the padding-top hack that developers used to force fixed aspect ratios.
🎯 Common width/height Values
| Value | Use case |
|---|---|
width: 100% | Fill the parent (images, inputs). |
max-width: 65ch | Readable paragraph width (~65 characters). |
max-width: 1200px | Standard content container cap. |
min-height: 100vh | Full-viewport hero section. |
min-height: 100dvh | Mobile-friendly full height. |
width: fit-content | Shrink to content (buttons, tags). |
aspect-ratio: 16/9 | Media containers, video embeds. |
⚠️ Common Mistakes
- Using fixed
widthinstead ofmax-width. Breaks on mobile — always use max-width for responsive containers. - Forgetting
box-sizing: border-box. Padding and border add to the size, breaking layouts. - Using
height: 100%without a parent height. Percentage heights need a defined parent height, or they collapse to 0. - Using
100vwfor full width.100vwincludes the scrollbar width and can cause horizontal overflow. Usewidth: 100%on a full-width parent instead. - Not testing width on 320px viewports. Some layouts look fine at 375px and break at 320px. Test the smallest phone size.
- Height on inline elements. Width and height don't apply to
display: inlineelements. Useinline-blockorblock. - Setting both width and height on text-heavy elements. Text needs to grow. Use
min-heightinstead.
♿ Accessibility Notes
- Never lock heights on text containers. Users with larger fonts need content to grow. Use
min-heightinstead. - Support 200% zoom. Widths in
pxmay not scale with zoom. Useremor%where possible. - Full-viewport heights can hide content. Users who zoom in see less of the viewport. Ensure critical content isn't off-screen.
- Touch targets need minimum width/height. Aim for at least 44×44px for buttons and links (WCAG 2.5.5).
- Respect
100dvhfor mobile. Using100vhon mobile can hide content behind the address bar.
❓ Frequently Asked Questions
What is the CSS width property?
The width property sets the horizontal size of an element's content box. It accepts fixed units (px), relative units (%), viewport units (vw), and keywords (auto, fit-content, max-content). It does not include padding, border, or margin unless box-sizing: border-box is set.
What is the difference between width and max-width?
width sets an exact size. max-width sets a limit — the element can be smaller but never larger. Using max-width instead of width is the responsive best practice because it lets content shrink on small screens.
What is box-sizing: border-box?
box-sizing: border-box changes the box model so padding and border are included inside the declared width. This makes layouts predictable — an element with width: 100px and padding: 20px stays exactly 100px wide instead of becoming 140px.
What is the difference between 100vw and 100%?
100vw is always the full viewport width, including the scrollbar. 100% is 100% of the parent element's width, which is usually safer because it accounts for scrollbars and containers.
What is aspect-ratio in CSS?
aspect-ratio lets you set the ratio between an element's width and height. Example: aspect-ratio: 16 / 9 keeps a video container in widescreen proportion regardless of its actual size.