CSS height and width properties specify the vertical and horizontal dimensions of HTML elements. Dimensions can be declared using absolute units (pixels) or relative units (percentages, vh, vw, rem).
Height and width control the size of content areas:
.card {
width: 100%; /* Takes full available parent width */
max-width: 600px; /* Caps width on desktop viewports */
height: auto; /* Height expands naturally with content */
min-height: 200px; /* Enforces minimum vertical height */
}
Sizing properties explained:
width: Sets explicit element width (500px, 80%).height: Sets explicit element height (300px, 100vh).min-width / min-height: Prevents elements from shrinking smaller than a set limit.max-width / max-height: Caps elements from expanding larger than a set limit.flowchart TD
A["CSS Dimension Units"] --> B["Absolute Units (px, pt) -> Fixed pixel sizing"]
A --> C["Relative Units (%, rem, em) -> Scales relative to parent or root font"]
A --> D["Viewport Units (vh, vw) -> Scales relative to screen height/width"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Height and Width Demonstration</title>
<style>
.responsive-box {
width: 90%;
max-width: 500px;
min-height: 150px;
background-color: #1e293b;
border: 2px solid #38bdf8;
padding: 1.5rem;
border-radius: 8px;
margin: 0 auto;
}
</style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">
<div class="responsive-box">
<h3>Fluid Dimension Sizing</h3>
<p>This box shrinks on mobile screens (`width: 90%`) but caps at `500px` on desktop displays!</p>
</div>
</body>
</html>
height: auto) so expanding multiline text doesn't overflow.min-height: 100vh for full-screen hero sections: Ensures hero layouts span the full height of the user's viewport.width: 100% with max-width: Creates responsive layout containers that adapt fluidly across devices.Create a CSS class .hero-section configured with min-height: 100vh; and width: 100%;!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.