← HTML & CSS

Width and height

A CSS property that sets the maximum width an element is allowed to reach. The element can be smaller but never wider. Useful for responsive layouts.

Part of: HTML and CSS Journey — Module 47

Understanding Width and height in HTML & CSS

What it does: min-height: 50vh means the section is always at least half the viewport tall. It can grow taller with content but never shorter. width: 100% makes the paragraph as wide as its parent element. On a 600px parent, it becomes 600px. max-width: 100% sets an upper limit. The image can be its natural size or smaller but never wider than the container. CSS property names are case-sensitive and must be lowercase. 'Width' is invalid — use 'width'. By default, width and height apply to the content area only. Padding and border are added on top. Use box-sizing: border-box to include them.

Common mistakes: CSS declarations require a colon. It should be width: 200px; not width 200px;. CSS declarations require a colon. It should be height: 150px; not height 150px;.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Width and height to a class →

This module's key terms are also in a printable crossword (Modules 43–52) and word search (Modules 43–63).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

What does max-width: 100% do on an image?

Prevents the image from exceeding its container's widthStretches the image to always fill its container

Matches

p { widht: 200px; }

↓

'widht' is a typo — the correct CSS property name is 'width'

Applying

Meanings

Term

max-width

Meaning

A CSS property that sets the maximum width an element is allowed to reach. The element can be smaller but never wider. Useful for responsive layouts.

Practice

div {

Testing

Gaps

div { : 300px; }

Check Answer

Spots

1p { width 200px; }

2h1 { height: 100px; }

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. What does max-width: 100% do on an image?

A. Prevents the image from exceeding its container's width ✓

B. Stretches the image to always fill its container

max-width: 100% sets an upper limit. The image can be its natural size or smaller but never wider than the container.

2. Which property sets the minimum vertical size of an element?

A. min-width

B. min-height ✓

min-height sets the smallest vertical size. min-width sets the smallest horizontal size.

3. True or false: width: 50% is relative to the viewport width.

A. False ✓

B. True

Percentage widths are relative to the parent element's width, not the viewport. Use vw for viewport-relative widths.

4. True or false: CSS property names like 'Width' with a capital letter are valid.

A. False ✓

B. True

CSS property names are case-sensitive and must be lowercase. 'Width' is invalid — use 'width'.

5. What does min-width: 200px do?

A. Sets the element's width to exactly 200px

B. Prevents the element from being narrower than 200px ✓

min-width sets a lower bound. The element can be 200px or wider but never narrower than 200px.

Match the Pairs

div { width: 800px; max-width: 100%; } → Fixed 800px wide on large screens, but shrinks to fit its container on smaller screens — responsive sizing

img { max-width: 100%; } → Prevents the image from exceeding its container — it can be its natural size or smaller but never wider

min-height prevents an element from being shorter than the specified value → section { min-height: 50vh; }

% widths are relative to the parent element's width, not the viewport → p { width: 100%; }

p { widht: 200px; } → 'widht' is a typo — the correct CSS property name is 'width'

div { Width: 300px; } → CSS property names must be lowercase — 'Width' should be written as 'width'

Key Term

max-width

A CSS property that sets the maximum width an element is allowed to reach. The element can be smaller but never wider. Useful for responsive layouts.

Fill in the Blanks

1. div { width: 300px; }

Hint: Type the CSS property name that sets the horizontal size of an element

2. div { height: 200px; }

Hint: Type the CSS property name that sets the vertical size of an element

3. img { max-width: 100%; }

Hint: Type the CSS property name that sets the largest size an element is allowed to reach

4. section { min-height: 50vh; }

Hint: Type the CSS property name that sets the smallest vertical size an element must be

5. p { min-width: 200px; }

Hint: Type the CSS property name that sets the smallest horizontal size an element must be

Spot the Error

Question 1

A p { width 200px; }

B h1 { height: 100px; }

C div { width: 50%; }

Line A — CSS declarations require a colon. It should be width: 200px; not width 200px;

Question 2

A div { width: 300px; }

B img { height 150px; }

C p { max-width: 600px; }

Line B — CSS declarations require a colon. It should be height: 150px; not height 150px;

Question 3

A div { max-width: 800px; }

B p { width: 100%; }

C img { width: 50 %; }

Line C — There must be no space between the number and the unit. It should be width: 50%; not width: 50 %;

Question 4

A div { width: 400px; }

B p { min-height: 100px; }

C img { max-width: 100%; }

D section { height: 50 vh; }

Line D — There must be no space between the number and the unit. It should be height: 50vh; not height: 50 vh;

Question 5

A p { width: 100%; }

B div { height: 200px; }

C img { max-width: 100%; }

D section { min-height: 50vh; }

E a { width: 120 px; }

Line E — There must be no space between the number and the unit. It should be width: 120px; not width: 120 px;

Student with a class code? Join your class →