CSS dimensions control the size of elements on a web page. They decide how wide, tall, small, large, flexible, or constrained an element can be. Dimensions are used for containers, cards, buttons, images, forms, sidebars, modals, layouts, full-screen sections, and responsive design.
The main dimension properties are width, height, min-width, max-width, min-height, and max-height. Modern CSS also includes powerful sizing tools such as min(), max(), clamp(), fit-content, min-content, max-content, aspect-ratio, viewport units, and container query units.
An element's final size depends on its declared dimensions, content, padding, border, margin, parent size, display type, and box-sizing. If box-sizing is content-box, width applies only to the content box. If it is border-box, width includes content, padding, and border.
Most modern projects use a global border-box reset because it makes dimensions easier to predict.
.content-box-card {
box-sizing: content-box;
width: 300px;
padding: 20px;
border: 5px solid #2563eb;
/* Final rendered width: 350px */
}
.border-box-card {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 5px solid #16a34a;
/* Final rendered width: 300px */
}html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}width sets the preferred horizontal size. height sets the preferred vertical size. The word "preferred" matters because the browser may still adjust the final layout based on constraints, available space, content, and layout mode.
<div class="profile-card">
<h4>Asha Sharma</h4>
<p>Frontend Developer</p>
</div>.profile-card {
width: 320px;
height: 180px;
padding: 1rem;
border: 1px solid #d1d5db;
}Dimension values can be fixed, fluid, or constrained. Fixed values are simple but can break on small screens. Fluid values adapt but can become too wide. Constrained fluid values usually work best for responsive design.
| Pattern | Example | Best Use | Risk |
|---|---|---|---|
| Fixed | width: 300px; | Icons, buttons, small controls. | Can overflow on small screens. |
| Fluid | width: 100%; | Containers, inputs, images. | Can stretch too wide. |
| Constrained fluid | width: 100%; max-width: 960px; | Pages, cards, forms, articles. | Needs a sensible parent. |
| Viewport based | min-height: 100vh; | Hero sections and app shells. | Mobile browser UI can affect height. |
| Content based | width: fit-content; | Badges, tags, compact menus. | Can overflow with long content. |
min-width sets the smallest allowed width. max-width sets the largest allowed width. These are essential for layouts that must adapt to different screens while staying readable.
.page {
width: 100%;
max-width: 1100px;
margin-inline: auto;
}
.form-panel {
width: 100%;
max-width: 460px;
}
.sidebar {
min-width: 220px;
max-width: 320px;
}min-height is often safer than height because it gives an element a starting size while still allowing content to grow. max-height is useful for scrollable panels, dropdowns, message lists, and modals.
.card {
min-height: 180px;
}
.notification-list {
max-height: 360px;
overflow-y: auto;
}
.app-shell {
min-height: 100vh;
}Dimensions can use absolute units, relative units, viewport units, and content-based units. Choosing the right unit is just as important as choosing the right property.
| Unit | Relative To | Common Use |
|---|---|---|
| px | CSS pixel | Precise borders, icons, small controls. |
| % | Parent size | Fluid widths. |
| rem | Root font size | Spacing and component sizes. |
| em | Current element font size | Text-related component sizing. |
| ch | Width of the "0" character | Readable text line length. |
| vw, vh | Viewport width and height | Full-screen sections and viewport-relative sizing. |
| dvh, svh, lvh | Dynamic, small, and large viewport height | More reliable mobile viewport layouts. |
| cqw, cqh | Container width and height | Container query based components. |
.article {
max-width: 68ch;
}
.wrapper {
width: 90%;
max-width: 72rem;
}
.hero {
min-height: 100dvh;
}CSS can size elements based on their content. These keywords are especially useful in Grid, inline layouts, tags, menus, and compact components.
| Value | Meaning |
|---|---|
| auto | Let the browser calculate the size based on layout rules. |
| min-content | Use the smallest size the content can shrink to. |
| max-content | Use the size needed without wrapping content. |
| fit-content | Fit content but do not exceed available space. |
.badge {
width: fit-content;
}
.nowrap-menu {
width: max-content;
max-width: 100%;
}
.narrow-heading {
width: min-content;
}min(), max(), and clamp() make dimensions more flexible without many media queries. They are excellent for responsive wrappers, cards, typography, and spacing.
.container {
width: min(100% - 2rem, 1100px);
margin-inline: auto;
}
.card {
width: clamp(260px, 50vw, 520px);
}
.panel {
min-height: max(240px, 40vh);
}aspect-ratio defines the proportional relationship between width and height. It is useful for images, videos, cards, thumbnails, embeds, and placeholders because it reserves stable layout space.
<img class="thumbnail" src="course.jpg" alt="Course preview">
<div class="video-frame">
<iframe src="video.html" title="Lesson video"></iframe>
</div>.thumbnail {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}
.video-frame {
width: 100%;
aspect-ratio: 16 / 9;
}
.video-frame iframe {
width: 100%;
height: 100%;
border: 0;
}Images, videos, iframes, and form controls are called replaced elements because their content is controlled outside normal text layout. They need careful sizing to avoid distortion and overflow.
img,
video {
max-width: 100%;
height: auto;
}
.cover-image {
width: 100%;
height: 280px;
object-fit: cover;
}
.contain-image {
width: 100%;
height: 280px;
object-fit: contain;
}When content is larger than its box, overflow happens. This is common with fixed heights, long words, tables, images, and wide code blocks. Use flexible dimensions and overflow rules intentionally.
.scroll-panel {
max-height: 320px;
overflow-y: auto;
}
.table-wrapper {
max-width: 100%;
overflow-x: auto;
}
.long-title {
overflow-wrap: anywhere;
}Flex items have default minimum sizes based on their content. If a flexible child refuses to shrink and causes horizontal overflow, add min-width: 0 to the flex child.
<div class="media-row">
<img src="avatar.jpg" alt="Asha">
<div class="media-content">
<h4>Very long profile title that must shrink properly</h4>
<p>Short profile summary.</p>
</div>
</div>.media-row {
display: flex;
gap: 1rem;
}
.media-row img {
width: 64px;
height: 64px;
object-fit: cover;
flex: 0 0 auto;
}
.media-content {
flex: 1;
min-width: 0;
}Grid tracks can also overflow if their minimum size is based on content. Use minmax(0, 1fr) when a flexible grid column should be allowed to shrink.
.layout {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 1rem;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
.dashboard {
display: grid;
grid-auto-rows: minmax(140px, auto);
}Full-height layouts are common for landing sections, dashboards, login screens, and sticky footers. Prefer min-height over height so content can still grow when needed.
<body class="site">
<header>Header</header>
<main>Main content</main>
<footer>Footer</footer>
</body>.site {
min-height: 100dvh;
display: grid;
grid-template-rows: auto 1fr auto;
}This example combines several dimension techniques: constrained wrapper width, responsive columns, minimum card height, fixed media ratio, and flexible content.
<section class="courses">
<article class="course-card">
<img src="css.jpg" alt="CSS course">
<div class="course-body">
<h3>CSS Dimensions</h3>
<p>Learn practical sizing patterns.</p>
</div>
</article>
</section>.courses {
width: min(100% - 2rem, 1100px);
margin-inline: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}
.course-card {
min-height: 320px;
display: grid;
grid-template-rows: auto 1fr;
border: 1px solid #d1d5db;
}
.course-card img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.course-body {
padding: 1rem;
}When an element is not the size you expect, inspect the box model in browser DevTools. Check content size, padding, border, margin, computed width, parent width, overflow, and layout mode.
CSS dimensions are the foundation of reliable layouts. They control how elements take space, how content fits, how media scales, and how pages respond to different screen sizes. Good dimension rules balance flexibility and constraints.
Use fixed values only when a fixed size is truly needed. For most modern layouts, combine width: 100%, max-width, min-height, aspect-ratio, responsive units, and modern sizing functions like min(), max(), and clamp().
CSS dimensions are properties and values that control element size, including <code>width</code>, <code>height</code>, <code>min-width</code>, <code>max-width</code>, <code>min-height</code>, and <code>max-height</code>.
<code>width</code> sets the preferred width. <code>max-width</code> sets the largest width the element may reach.
Use <code>min-height</code> when content may grow. Use <code>height</code> only when the element must have a strict fixed height.
Use <code>max-width: 100%</code> and <code>height: auto</code>. Use <code>object-fit</code> when the image must fill a fixed frame.
Flex items have content-based minimum sizes. Add <code>min-width: 0</code> to the flexible child so it can shrink.
Explore 500+ free tutorials across 20+ languages and frameworks.