Loading...

CSS Height and Width

You can frame a box, round it, and give it outer and inner space. Next skill: decide how big the box is. width and height set the size of the element’s content box — how wide and how tall that core area should be.

What do width and height do?

width controls horizontal size. height controls vertical size. Common values use lengths like px or relative sizes like %. If you leave them alone, many elements size themselves from their content and layout context.

Fixed size with pixels

A clear everyday start: give a panel an exact width (and optionally height) in pixels.

Fixed pixel width

css
CSS Code 
.panel {
width: 320px;
border: 1px solid #cbd5e1;
padding: 1rem;
background-color: #ffffff;
}

Width and height together

When a design needs a definite rectangle — a thumbnail frame, a tile, a media slot — set both.

Width and height on a tile

css
CSS Code 
.tile {
width: 160px;
height: 120px;
border: 2px solid #0f766e;
background-color: #ecfdf5;
}

Percentage width

A % width is usually relative to the width of the containing block (often the parent). width: 50% means “about half as wide as my parent,” not half the screen by magic.

Half the parent width

css
CSS Code 
.half {
width: 50%;
border: 1px solid #94a3b8;
padding: 0.75rem;
background-color: #f8fafc;
}

Sizing tools at a glance

Beyond plain width and height, CSS gives you guardrails.

📊 Width and height tools

Tool Role Everyday note
width / height Preferred size of the content box Start here for fixed or fluid sizes
min-width / min-height Do not shrink below this Keep buttons or sidebars usable
max-width / max-height Do not grow beyond this Soften huge images or wide text blocks
auto Let the browser compute Default height often follows content
% Relative to the containing block Width % is common; height % needs a defined parent height

min-width as a floor

Useful when a box should stay usable even if the layout squeezes.

Minimum width floor

css
CSS Code 
.btn-wide {
min-width: 12rem;
padding: 0.6rem 1rem;
background-color: #0f766e;
color: #ffffff;
border: none;
}

max-width as a ceiling

A classic habit for readable text or images that should not stretch forever on large screens.

Maximum width ceiling

css
CSS Code 
.prose {
max-width: 40rem;
width: 100%;
margin: 0 auto;
line-height: 1.6;
}

Height often stays auto

For text blocks, let height grow with content. A tiny fixed height can clip text unless you also plan overflow (a later lesson).

Auto height follows content

css
CSS Code 
.article {
width: 100%;
max-width: 36rem;
height: auto; /* grows with the paragraphs */
padding: 1rem;
border: 1px solid #cbd5e1;
}

Try it yourself

  1. Build a panel with width: 320px and visible padding/border.
  2. Make a 160×120 tile with both width and height set.
  3. Place a child with width: 50% inside a wider parent and resize the parent.
  4. Add min-width: 12rem to a button and shrink the viewport.
  5. Give a text block max-width: 40rem and height: auto — then try a very small fixed height and notice clipping risk.

Common mistakes

  • Using height: 50% when the parent has no explicit height (the percentage may not do what you expect)
  • Locking a short height on a text box and wondering why content is cut off
  • Forgetting max-width on large images or long lines of text
  • Confusing width (size of the content box) with padding (inner cushion)
  • Assuming width always includes border and padding — that depends on box-sizing (covered soon)

Summary

  • width and height size the content box
  • Use px for fixed sizes and % for fluid widths relative to the parent
  • min-* and max-* set floors and ceilings
  • Prefer height: auto for growing text content
  • Percentage height needs a parent with a defined height
  • Full box math (padding + border + width) comes in the next box-model lessons

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
9
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Css Tutorial