Width and height properties control the dimensions of elements, determining how much space they occupy on the page. CSS provides multiple ways to size elements—from fixed pixel values to flexible percentages and viewport units. Understanding these properties and their constraints is essential for creating responsive, adaptable layouts that work across all screen sizes.
width Property
The width property sets the width of an element's content area (remember the box model!).
Width Values
/* Length units */
.element {
width: 300px; /* Pixels (fixed) */
width: 20em; /* Relative to font size */
width: 15rem; /* Relative to root font size */
}
/* Percentage (relative to parent width) */
.element {
width: 50%; /* 50% of parent's width */
width: 100%; /* Full width of parent */
}
/* Viewport units */
.element {
width: 50vw; /* 50% of viewport width */
width: 100vw; /* Full viewport width */
}
/* Keyword values */
.element {
width: auto; /* Default - fits content */
width: max-content; /* Width of content (no wrapping) */
width: min-content; /* Minimum width (maximum wrapping) */
width: fit-content; /* Between min and max content */
}Width Property Examples
Width Units
| Property | Values | Description |
|---|---|---|
px | 300px | Fixed width in pixels |
% | 50%, 100% | Percentage of parent's width |
em/rem | 20em, 15rem | Relative to font size |
vw | 50vw, 100vw | Percentage of viewport width |
auto | auto | Default - fits content or stretches |
height Property
The height property sets the height of an element's content area. It works similarly to width but with some important differences.
/* Length units */
.element {
height: 200px; /* Pixels (fixed) */
height: 10em; /* Relative to font size */
height: 8rem; /* Relative to root font size */
}
/* Percentage (relative to parent height) */
.element {
height: 50%; /* 50% of parent's height */
/* WARNING: Parent must have explicit height! */
}
/* Viewport units */
.element {
height: 50vh; /* 50% of viewport height */
height: 100vh; /* Full viewport height */
}
/* Keyword values */
.element {
height: auto; /* Default - fits content */
}Height Property Examples
Percentage Height Gotcha: Unlike width, percentage heights only work if the parent element has an explicit height set. If the parent has height: auto, percentage heights won't work as expected!
min-width and max-width
These properties set minimum and maximum width constraints, allowing elements to be flexible within boundaries.
/* Minimum width - element can't shrink below this */
.element {
width: 50%;
min-width: 200px; /* Won't shrink below 200px */
}
/* Maximum width - element can't grow beyond this */
.element {
width: 100%;
max-width: 800px; /* Won't grow beyond 800px */
}
/* Common pattern: flexible with constraints */
.container {
width: 100%; /* Fluid, adapts to parent */
max-width: 1200px; /* But never wider than 1200px */
margin: 0 auto; /* Center it */
}
/* Responsive image pattern */
img {
max-width: 100%; /* Never overflow container */
height: auto; /* Maintain aspect ratio */
}min-width and max-width Examples
Common max-width Pattern for Containers
Centered Container Pattern
🎯 Best Practice:
Almost all main content containers should use max-width to prevent content from becoming too wide on large screens. Reading lines that are too long (over 75-80 characters) hurt readability. A common pattern is: width: 100%; max-width: 1200px; margin: 0 auto;
min-height and max-height
These properties set minimum and maximum height constraints, especially useful for flexible layouts.
/* Minimum height - element can't shrink below this */
.element {
min-height: 200px; /* At least 200px tall */
/* Grows if content needs more space */
}
/* Maximum height with overflow handling */
.element {
max-height: 300px; /* Won't grow beyond 300px */
overflow: auto; /* Add scrollbar if content exceeds */
}
/* Full viewport height minimum */
.hero {
min-height: 100vh; /* At least full viewport height */
}
/* Card with flexible height */
.card {
min-height: 200px; /* Minimum height */
max-height: 500px; /* Maximum height */
overflow-y: auto; /* Scroll if content exceeds */
}min-height and max-height Examples
Full Viewport Height Hero
Full Height Hero Section
Viewport Units
Viewport units size elements relative to the browser viewport (visible area), making them perfect for responsive designs.
Viewport Units
| Property | Values | Description |
|---|---|---|
vw | 50vw, 100vw | 1vw = 1% of viewport width |
vh | 50vh, 100vh | 1vh = 1% of viewport height |
vmin | 50vmin | 1vmin = 1% of smaller viewport dimension |
vmax | 50vmax | 1vmax = 1% of larger viewport dimension |
/* Viewport width (vw) */
.element {
width: 50vw; /* 50% of viewport width */
width: 100vw; /* Full viewport width */
}
/* Viewport height (vh) */
.element {
height: 50vh; /* 50% of viewport height */
height: 100vh; /* Full viewport height */
}
/* vmin - smaller dimension */
.element {
width: 50vmin; /* 50% of smaller dimension (width or height) */
/* On portrait: 50% of width */
/* On landscape: 50% of height */
}
/* vmax - larger dimension */
.element {
width: 50vmax; /* 50% of larger dimension */
/* On portrait: 50% of height */
/* On landscape: 50% of width */
}
/* Practical examples */
.full-screen {
width: 100vw;
height: 100vh;
}
.hero {
min-height: 100vh; /* Full viewport height minimum */
}
.sidebar {
width: 20vw; /* 20% of viewport width */
min-width: 200px; /* But at least 200px */
}Viewport Units Examples
Mobile Viewport Height Issue: On mobile browsers, 100vh can cause issues because the address bar height changes when scrolling. Modern CSS has new units like svh (small viewport height) and lvh (large viewport height) to handle this, but they have limited support. For now, consider using min-height: 100vh instead of height: 100vh for full-screen sections.
The auto Value
The auto value is the default for width and height, but it behaves differently depending on the element type.
/* Width: auto */
.block-element {
width: auto; /* Default for block elements */
/* Stretches to fill parent width */
}
.inline-element {
width: auto; /* Default for inline elements */
/* Shrinks to fit content */
}
/* Height: auto */
.element {
height: auto; /* Default for all elements */
/* Grows to fit content */
}
/* auto for centering */
.centered {
width: 300px;
margin-left: auto; /* Push to right */
margin-right: auto; /* Push to left */
/* Result: centered horizontally */
}auto Value Behavior
aspect-ratio Property
The modern aspect-ratio property lets you maintain a specific width-to-height ratio, perfect for responsive images and video containers.
/* Basic aspect ratio */
.element {
aspect-ratio: 16 / 9; /* 16:9 ratio */
aspect-ratio: 4 / 3; /* 4:3 ratio */
aspect-ratio: 1 / 1; /* Square */
aspect-ratio: 1; /* Also square */
}
/* Common use: video containers */
.video-container {
width: 100%;
aspect-ratio: 16 / 9;
background: black;
}
/* Common use: square thumbnails */
.thumbnail {
width: 200px;
aspect-ratio: 1;
object-fit: cover; /* For images */
}
/* With max-width */
.card {
width: 100%;
max-width: 400px;
aspect-ratio: 3 / 4; /* Portrait ratio */
}aspect-ratio Property Examples
📐 Aspect Ratio Tip:
The aspect-ratio property is widely supported in modern browsers and eliminates the need for the old "padding-bottom hack" for maintaining aspect ratios. It's especially useful for responsive video embeds, card images, and any element that should maintain proportions.
Responsive Images
Making images responsive is one of the most common use cases for width and height properties.
/* Basic responsive image */
img {
max-width: 100%; /* Never overflow container */
height: auto; /* Maintain aspect ratio */
}
/* With object-fit for cropping */
.thumbnail {
width: 200px;
height: 200px;
object-fit: cover; /* Crop to fill */
}
/* Responsive background image */
.hero {
width: 100%;
height: 400px;
background-size: cover;
background-position: center;
}
/* Image with aspect ratio */
.card-image {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}Responsive Images
Practical Sizing Patterns
Pattern 1: Centered Container with Max Width
/* Most common layout pattern */
.container {
width: 100%; /* Fluid on all screens */
max-width: 1200px; /* Never too wide */
margin: 0 auto; /* Centered horizontally */
padding: 0 20px; /* Side spacing on mobile */
}
/* For different sections */
.narrow-container {
max-width: 800px; /* Articles, blog posts */
}
.wide-container {
max-width: 1400px; /* Dashboards, tables */
}Pattern 2: Full-Width Sections with Centered Content
/* Full-width colored section */
.section {
width: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 80px 20px;
}
/* Centered content inside */
.section-content {
max-width: 1200px;
margin: 0 auto;
}Pattern 3: Responsive Card Grid
/* Responsive cards that shrink on mobile */
.card {
width: 100%;
min-width: 250px; /* Minimum size */
max-width: 400px; /* Maximum size */
min-height: 300px; /* Minimum height */
}
/* Or with aspect ratio */
.card {
width: 100%;
aspect-ratio: 3 / 4; /* Maintain proportions */
max-width: 350px;
}Common Layout Patterns
Key Takeaways
- width and height set element dimensions
- Values: pixels (fixed), percentages (relative), viewport units (responsive)
min-widthandmax-widthcreate flexible boundariesmin-heightandmax-heightcontrol vertical constraints- Percentage height requires explicit parent height
autois the default—stretches for blocks, shrinks for inlinemax-width: 100%on images prevents overflow- Viewport units (vw, vh) size relative to browser window
aspect-ratiomaintains proportions (modern browsers)- Common pattern:
width: 100%; max-width: 1200px; margin: 0 auto; min-height: 100vhfor full-screen sections- Combine min/max with flexible units for responsive designs
What's Next?
Now that you've mastered width and height properties, you're ready to learn about Display Property. In the next lesson, we'll explore how the display property controls whether elements are block, inline, inline-block, or hidden entirely. Understanding display is crucial for controlling layout behavior and creating complex page structures.
Width and height are fundamental to layout control—understanding how to size elements flexibly while maintaining constraints is essential for responsive design. Practice combining different units and constraints to create layouts that work beautifully on all screen sizes!