CSS Sizing: Width, Height and aspect-ratio

Control element size with width, height, min and max sizes, box-sizing and aspect-ratio, and make boxes that shrink nicely on small screens.

Lesson 12 of 49Beginner16 min read

Every box on a web page has a size, and most layout problems come down to sizing. A card is too wide on a phone, an image stretches out of shape, a sidebar collapses, or a footer floats halfway up a short page. The fix is nearly always one of a handful of properties: width, height, their min and max versions, box-sizing and aspect-ratio.

By default, a block element such as a <div> or <p> is as wide as its container and only as tall as its content. That default is already responsive, so the golden rule is to set sizes only when you need to, and to prefer limits like max-width over fixed values like width: 800px.

In this lesson you'll learn how width and height work, why box-sizing: border-box is used on almost every site, how min-height and max-width keep layouts flexible, how to keep shapes with aspect-ratio, and how keywords like fit-content size a box to its content.

width and height

CSS
.card {
  width: 300px;
  height: 200px;
}
  • width and height accept lengths (px, rem), percentages, and keywords such as auto.
  • A percentage width is relative to the width of the parent's content box. width: 50% is half the parent.
  • A percentage height only works when the parent has a definite height. That's why height: 100% often seems to do nothing.
  • Inline elements such as <span> and <a> ignore width and height unless you change their display to inline-block or block.

min and max sizes

PropertyWhat it doesTypical use
max-widthThe box can't grow wider than thisReadable text columns, page wrappers
min-widthThe box can't shrink narrower than thisButtons, table columns
max-heightThe box can't grow taller than thisScrolling panels with overflow
min-heightThe box is at least this tall but can growHero sections, full-height pages

max-width beats width, and min-width beats max-width. So width: 900px; max-width: 100% is never wider than its container, which is a common way to make a fixed-size element safe on phones.

box-sizing: border-box

By default, width sets only the content width. Padding and border are added on top, so a width: 300px box with 20px padding and a 2px border is really 344 pixels wide. With box-sizing: border-box, the width includes padding and border, so the box is exactly 300 pixels wide. Almost every modern site starts with this rule:

CSS
*, *::before, *::after { box-sizing: border-box; }

You saw the content, padding and border layers in the box model lesson. Border-box simply makes width mean what most people expect.

aspect-ratio and content keywords

  • aspect-ratio: 16 / 9 keeps a box's shape as its width changes. Set the width (or let it fill its container) and the browser works out the height.
  • width: fit-content shrinks a block to fit its content, but never wider than the container. It's handy for buttons and tags.
  • min-content is the smallest the box can be without overflowing, usually the longest word. max-content is the width the content wants with no wrapping at all.
  • Viewport units such as 100vh and the newer 100dvh size a box relative to the browser window. dvh adjusts for mobile browser toolbars that appear and disappear.

CSS Sizing Syntax

Sizing properties

.box {
  width: 50%;
  max-width: 600px;
  min-width: 200px;
  height: auto;
  min-height: 100dvh;
  aspect-ratio: 4 / 3;
  box-sizing: border-box;
}
.tag { width: fit-content; }

CSS Sizing Summary

  • Block elements fill their container's width and grow to fit their content's height by default.
  • Use max-width and min-height instead of fixed sizes so boxes adapt to any screen.
  • Percentage heights only work when the parent has a set height.
  • box-sizing: border-box makes width include padding and border.
  • aspect-ratio keeps a shape; fit-content sizes a box to its content.

CSS Sizing Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

A responsive page wrapper

Drag the result panel narrower, or view it on a phone. The text column never overflows.

.container {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
  background: #ecfdf5;
  border-radius: 12px;
  font-family: sans-serif;
  line-height: 1.6;
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 2The box can be up to 480 pixels wide, but it shrinks on smaller screens.
  2. Line 3Auto left and right margins centre the box.
  3. Line 4Padding keeps text off the edges on phones.
Example 2

content-box vs border-box

Both boxes have width: 240px and the same padding and border. Only the second is really 240 pixels wide.

.box {
  width: 240px;
  padding: 20px;
  border: 6px solid #2563eb;
  margin-bottom: 10px;
  font-family: sans-serif;
}

.content { box-sizing: content-box; }
.border { box-sizing: border-box; }
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 2 to 4Width 240px, plus 20px padding and a 6px border on each side.
  2. Line 9Content-box: the visible box is 240 + 40 + 12 = 292 pixels wide.
  3. Line 10Border-box: padding and border fit inside 240 pixels.
Example 3

aspect-ratio for video and cards

.grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  font: 600 14px sans-serif;
}

.thumb, .square {
  display: grid;
  place-items: center;
  background: #fde68a;
  border-radius: 10px;
}

.thumb { aspect-ratio: 16 / 9; }
.square { aspect-ratio: 1 / 1; background: #bfdbfe; }
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 1 to 6Two columns that share the width.
  2. Line 15The first box keeps a widescreen shape at any width.
  3. Line 16The second stays perfectly square.

Common CSS Sizing Mistakes

Fixed widths on phones

Don't
.card { width: 600px; }
Do
.card { width: 100%; max-width: 600px; }

A fixed 600-pixel card is wider than most phones, so the page scrolls sideways.

height: 100% with no parent height

Don't
.hero { height: 100%; } /* parent height is auto, so nothing happens */
Do
.hero { min-height: 100dvh; }

Viewport units don't depend on the parent, so they work for full-screen sections.

Setting height on text boxes

Don't
.card { height: 180px; } /* longer text spills out */
Do
.card { min-height: 180px; }

Text length changes with translations, font size and screen width. min-height lets the box grow.

CSS Sizing in Real Projects

Sizing in real projects

CSS resets such as the one in Tailwind and most frameworks set box-sizing: border-box on everything. Blogs limit text columns with max-width: 65ch, which keeps lines to a comfortable 60 to 75 characters. Video embeds and product images use aspect-ratio so the page doesn't jump while media loads, which improves Google's Cumulative Layout Shift score.

CSS Sizing Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Make the card shrink on small screens but never grow beyond 500px.

.card {
  width: 100%;
  : 500px;
}
Multiple choiceeasy

With box-sizing: border-box, what does width include?

Multiple choicemedium

Why might height: 50% have no effect?

Multiple choicemedium

Which property keeps a video box at 16:9 as it resizes?

Fix the bugmedium

The panel should be exactly 300px wide including its padding, and at least 120px tall even when empty. Fix the CSS.

.panel {
  width: 300px;
  padding: 20px;
  height: 120;
  background: #e0f2fe;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Panel is 300px wide in total
  • Panel is at least 120px tall
  • Uses min-height

CSS Sizing Quiz

5 questions to check what you learned.

  1. How wide is a <div> by default?

    • As wide as its text
    • As wide as its container
    • 100 pixels
    • Half the screen

  2. A box has width: 200px; padding: 10px; border: 5px solid and the default box-sizing. How wide does it look?

    • 200px
    • 215px
    • 230px
    • 220px

  3. Which rule wins if width: 800px and max-width: 100% are both set in a 400px container?

    • max-width, so the box is 400px
    • width, so the box is 800px
    • Whichever comes last
    • Neither, the box disappears

  4. What does width: fit-content do?

    • Fills the whole page
    • Shrinks the box to its content, up to the container width
    • Sets width to zero
    • Removes padding

  5. Why is 100dvh often better than 100vh on phones?

    • It adjusts as mobile browser toolbars appear and disappear
    • It's faster
    • It works in older browsers
    • It includes the keyboard

CSS Sizing Challenge

A responsive profile card

  1. Give .card box-sizing: border-box, width: 100% and max-width: 320px
  2. Give .card padding: 16px
  3. Make .cover keep an aspect-ratio of 3 / 1
  4. Make .badge size to its content with width: fit-content
.wrap { width: 500px; }
.cover { background: #93c5fd; border-radius: 8px; }
.badge { background: #fef3c7; padding: 4px 10px; border-radius: 999px; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Card is 320px wide including padding
  • Card has 16px padding
  • Cover is three times as wide as it is tall
  • Badge fits its content

Related CSS topics

14Box ModelEvery element is a box. Learn how its size really works.11Units (px, rem, %)Pixels, rems, percentages, viewport units and fluid sizes.13Overflow & VisibilityDecide what happens when content is too big for its box, add scrollbars, truncate text with an ellipsis, and hide elements with visibility, opacity or display.
Esc
↑↓ to navigateEnter to open