width
Sets the inline size in normal horizontal writing mode. Use carefully on mobile.
Platform under construction
Width & Height
Width and height define size, but professional CSS relies just as much on min-width, max-width, min-height, max-height and logical sizing.
.panel {
width: min(100%, 42rem);
min-height: 16rem;
}
Box Model
Good dimensions create boundaries without suffocating content.
A width value can make an element clear and stable. A bad width value can make it overflow a mobile screen. A height value can create balance, but it can also clip real content.
Modern CSS often uses max-width, min-height, clamp(), min(), max() and logical properties to create flexible boundaries instead of rigid boxes.
The goal is not to avoid dimensions. The goal is to choose dimensions that respect content, layout context and screen size.
max-width
Limits how wide something can become while still allowing it to shrink.
min-height
Creates a minimum visual area without clipping taller content.
clamp()
Sets a flexible value with a minimum, preferred value and maximum.
Visual model
See the box before you change the CSS.
Layout debugging becomes much easier when you can point to the exact part of the box that creates the visual result: inner space, outer space, edge, size or overflow behavior.
The box should not become smaller than usable content.
The box can breathe with viewport or container space.
The box should stop growing before lines become too long.
Examples
Professional spacing is deliberate, not decorative guesswork.
Flexible dimensions
.article-card {
width: min(100%, 42rem);
min-height: 16rem;
padding: clamp(1rem, 3vw, 2rem);
}
Rigid dimensions
.article-card {
width: 760px;
height: 260px;
padding: 36px;
overflow: hidden;
}
Rules that matter
Make every spacing and sizing decision explainable.
Box model CSS should make the interface easier to reason about. When a value cannot be explained, it usually becomes a future layout bug.
Prefer max-width for readable text
Long lines become hard to read. Limit text containers.
Use min-height instead of height
Minimums create structure while allowing content to grow.
Combine fixed and fluid logic
min(), max() and clamp() reduce breakpoint noise.
Respect intrinsic media
Images and video need max-width: 100% and sensible aspect handling.
Watch narrow screens
A desktop width can become a mobile overflow bug.
Avoid hiding content
overflow: hidden should not be used to mask bad height decisions.
Production thinking
The box model is where visual polish becomes maintainable CSS.
Why does this matter?
Dimensions are where design intent meets real content. Good constraints make layouts calm; bad constraints make them brittle.
Accessibility
Users may zoom text or use larger default fonts. Flexible dimensions keep content readable when text grows.
Production note
Use dimensions as guardrails. Let content and layout systems do the rest whenever possible.
SEO note
Readable line length and stable responsive sizing improve the page experience for human readers.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Replace min-height with height and add a longer paragraph.
- Change width to 720px and test a narrow preview mentally.
- Use max-width on the paragraph and notice reading comfort.
Practice assignment
Do this before moving to the next lesson.
- Create one component with width and max-width.
- Replace a fixed height with min-height.
- Use clamp() for padding or width and explain the three values.
Try it yourself
Make a card flexible instead of fixed
Self-check
Before you continue, prove that you understand Width & Height.
Answer these questions before moving on. If the answer is vague, change the lab CSS and inspect the box again.
- Can you explain why fixed height is risky for text content?
- Can you choose width, max-width and min-height for a real card?
- Can you use min() or clamp() to reduce breakpoints?
- Can you keep media from overflowing its container?
- Can you test dimensions with longer content?
Senior audit upgrade
Modern sizing has intrinsic keywords too.
width and height are only the start. min-content, max-content and fit-content help the browser size elements from their content.
min-content
The smallest size content can shrink to without avoidable overflow.
max-content
The natural size if content does not wrap.
fit-content
A useful middle ground: fit content, but respect available space.