Width and height

Learn width and height properties.

Width and height

width sets the content width of a box, height sets the content height. These two properties measure only the content box; padding, border and margin are added on top.

Values can be pixels (px), percentages (%) or auto. auto asks the browser to distribute space itself; for example, block elements fill the full width by default.

min-width and max-width

Sometimes you want to bound how small or large a box can get. min-width forces a minimum width, max-width forces a maximum width.

For example, set width: 100% with max-width: 600px on a card: on small screens it fills the width, on large screens it never exceeds 600 pixels. This is called a fluid but bounded layout.

Exercise Write a fluid card

Write a block for the .card selector. Make it full width (width: 100%) but never wider than 600 pixels (max-width: 600px).

Show example solution

.card {
  width: 100%;
  max-width: 600px;
}

Test yourself

What does the width property measure?
- Only the content area
- Only padding
- Content, padding and border together
- The whole box (including margin)
Show answer

Only the content area — Correct. width measures only the content area; padding and border are added on top.

Fluid card rule

.card {
  width: 100%;
  ____: 600px;
}

Show answer

.card {
  width: 100%;
  max-width: 600px;
}

When is max-width useful?
- To shrink the card as the window narrows
- To stop the card from getting too wide on a large screen
- To change the card's background color
- To center the card horizontally
Show answer

To stop the card from getting too wide on a large screen — Correct. max-width keeps the card from growing without bound on a wide screen.
Match each size property to its role

width

Sets the content width
height

Sets the content height
max-width

Caps the maximum width
min-width

Forces the minimum width

Next lesson: Padding

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies