CSS by EezyTutorials

CSS - Width, Height & Sizing

Print this lesson
Back to top ↑

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 10–15 minutes

Control element dimensions with width, height, and intrinsic sizing keywords for responsive, content-aware layouts.

Learning Objectives

  • Use width, height, min/max constraints effectively.
  • Apply intrinsic sizing keywords: min-content, max-content, fit-content().

Prerequisites

  • Understanding of the box model and units.

Details & Examples

.card { 
  width: 320px; 
  max-width: 100%; /* responsive constraint */
}
.title { 
  width: max-content; /* shrink to content width */
}
.paragraph { 
  width: fit-content(50ch); /* cap at 50ch or available space */
}

Vocabulary

  • Intrinsic sizing: Sizing based on content rather than explicit values.
  • Constraint: min/max limits that override computed sizes when needed.

Common Pitfalls

  • Forgetting max-width: 100% makes fixed-width elements overflow on small screens.
  • Using min-content can cause text to wrap aggressively.

Checks for Understanding

  1. What does width: max-content do?
  2. How do you make a 400px element responsive?
Show answers
  1. It makes the element as wide as its content requires, ignoring available space.
  2. Add max-width: 100% so it shrinks when the container is smaller than 400px.

Exercises

  1. Make an image responsive with max-width: 100% while preserving its intrinsic ratio.
  2. Use fit-content to cap a paragraph width to 50ch.
Suggested answers
  1. img{ max-width:100%; height:auto; }
  2. width: fit-content(50ch);
« Prev: CSS - Borders & Outline Next: CSS - Box Sizing »