CSS Height/Width
In this page:
selector {
width: length | percentage | auto;
height: length | percentage | auto;
}Setting height and width
The height and width properties set an element's size directly. Without them, most elements simply size themselves based on their content. Content that overflows a fixed height or width needs an explicit overflow property, or it will visibly spill outside the box.
- Only fix a width or height when you actually need a specific size, letting content determine size naturally is often simpler.
- Accepted values:
- length — fixed size such as 200px, 20rem
- percentage — relative to the containing block
- auto — browser calculates the size (default)
- min-content | max-content | fit-content — content-based sizing
- vw | vh — relative to the viewport
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Example: Setting height and width
<style>
.box {
width: 200px;
height: 100px;
background: lightblue;
}
</style>
<div class="box">Fixed size box</div>min-height and max-height
min-height guarantees an element never shrinks below a certain size, even with little content, while max-height stops it from ever growing taller than a set limit.
These properties are especially useful for preventing a card or container from collapsing to zero height when it temporarily has no content.
- min-height is great for cards in a grid, keeping short and long cards visually aligned to a comfortable baseline height.
- Accepted values:
- length — e.g. 200px or 20rem
- percentage — relative to the container
- none — no limit (max-height / max-width initial value)
- auto — initial value of min-height / min-width
- fit-content / min-content / max-content — content-based sizes
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Example: min-height and max-height
<style>
.card {
min-height: 100px;
max-height: 200px;
background: lightyellow;
border: 2px solid #cc9900;
padding: 10px;
}
</style>
<div class="card">Never shorter than 100px, never taller than 200px</div>min-width and max-width
min-width stops an element from shrinking below a certain width, while max-width stops it from growing wider than a set limit, both very common tools for responsive layouts. Together with min-height and max-height, these four properties form the core toolkit for building flexible, responsive boxes.
- max-width paired with width: 100% is the classic pattern for a responsive image that never overflows its container.
- Accepted values:
- length — e.g. 600px or 40rem
- percentage — relative to the container's width
- none — no maximum (max-width initial value)
- auto — min-width initial value
- fit-content / min-content / max-content — content-based sizes
- calc() / min() / max() / clamp() — computed values
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Example: min-width and max-width
<style>
.box {
min-width: 150px;
max-width: 400px;
background: lightgreen;
border: 2px solid seagreen;
padding: 10px;
}
</style>
<div class="box">Between 150px and 400px wide</div>Percentage Units
A percentage height or width is calculated relative to the size of the element's parent container, which means the parent's own size directly affects how a percentage value renders.
- Percentage widths are extremely common for responsive columns that need to scale smoothly with their container.
- Accepted values:
- percentage — e.g. 50%; relative to the parent's size
- for height — the parent must have an explicit height
- width: 100% — fills the parent's content width
- auto — the browser calculates it (initial value)
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Example: Percentage Units
<style>
.parent {
width: 400px;
background: #ddd;
padding: 10px;
}
.child {
width: 50%;
background: coral;
color: white;
padding: 10px;
}
</style>
<div class="parent">
<div class="child">50% of the 400px parent = 200px</div>
</div>Viewport Units: vh and vw
Viewport units are relative to the browser window itself, not to any parent element. 1vh equals 1% of the viewport's height, and 1vw equals 1% of the viewport's width. Because they scale with the viewport rather than a parent element, vh and vw are popular for full-screen hero sections and layouts.
- vh is a popular choice for making a hero section fill the full visible screen height when a page first loads.
- Accepted values:
- vh — 1% of the viewport height
- vw — 1% of the viewport width
- vmin — 1% of the smaller viewport dimension
- vmax — 1% of the larger viewport dimension
- dvh / svh / lvh — dynamic, small and large viewport heights
Example: Viewport Units: vh and vw
<style>
.hero {
height: 100vh;
width: 100vw;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<div class="hero">Fills the full browser viewport</div>- Setting a fixed height on an element with variable text content, which can cause the text to overflow.
- Using percentage height without realizing the parent element also needs a defined height for it to work.
- Forgetting that min-width and max-width can silently override a plain width value outside their range.
- height and width set an element's size directly, in units like px, %, vh, or vw.
- min-height/max-height and min-width/max-width set boundaries an element can't shrink below or grow past.
- Percentage sizes are relative to the parent element, while vh and vw are relative to the browser viewport.
All standard CSS sizing properties and units covered here are supported by every modern browser.
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: