EN

CSS・Size and the box model

Setting width and height

You get to decide how big a part is. width for horizontal size, height for vertical. Use % and it grows and shrinks to fit the screen — the first step in layout.

So far we’ve been styling the look of a part’s contents — things like color and text. Now let’s widen our view and control the size of the parts themselves. We’ll start with the most basic: “width” and “height.”

Let’s write some

.box {
  width: 300px;
  height: 200px;
  background-color: teal;
}

This means “a box 300 pixels wide and 200 pixels tall.” Add a background color and the rectangle at the size you set shows up clearly.

  • width … the horizontal size
  • height … the vertical size

Change the numbers and the box’s size changes right along with them.

width is horizontal, height is vertical. The rectangle lands exactly at the size of the numbers you write.

Grow and shrink to fit the screen

Instead of px, use % (percent) and the size is set as a proportion of the surroundings.

.box {
  width: 50%;
}

This means “half the width of the surroundings.” Wide when the screen is wide, narrow when it’s narrow — it grows and shrinks automatically. Pages that hold up on both phones and computers are built with proportional settings like this.

The “surroundings,” to be precise, are the parent that wraps the part (the box one level out). Inside a box that fills the screen, it becomes half the screen; inside a box that’s 400px wide, it becomes 200px.

Inside the gray parent (400px wide), the blue box is 50% — exactly half the width. Change the parent’s size and this width changes right along with it.

Set just a minimum height: min-height

We just said “don’t over-set height,” but sometimes you want “at least this much, please.” That’s when min-height (minimum height) comes in.

.hero {
  min-height: 300px;
}

Even with little content, it secures a height of 300px, and when content grows it stretches to match. Unlike height, there’s no worry of spilling over, so when you want to give something height, this is the safe choice.

The top box is only as tall as its content. The bottom box secures a firm height of 120px with min-height, even with a single line of text.

Prevent “too wide” with max-width

Use max-width (maximum width) and you can set a cap: “you may grow up to here, but no wider.”

p {
  max-width: 500px;
}

Unlike width, it still shrinks properly when the screen is narrow, but even when the screen gets wide it won’t grow past 500px. It’s the standard way to keep text from stretching too long across a big screen and getting hard to read.

In the wide parent (top) it stops at 300px; in the narrow parent (bottom) it shrinks to fit the parent. “Cap the maximum, but shrink when narrow” — that’s the difference from width.

Set width by character count: the ch unit

Besides px, you can set text width with a unit called ch.

p {
  max-width: 32ch;
}

ch is a unit that takes the width of one character as 1 (short for character). So 32ch means “roughly the width of 32 characters.” Since you can set width based on the number of characters per line, it’s the perfect unit for preventing “the line is too long to read comfortably.”

TipsWhich CSS unit should I use?Besides px, %, and ch, there are all sorts of units — how to choose between them is gathered in this handy tip

Summary of this lesson

  1. Horizontal size is width, vertical size is height
  2. Use % and it grows and shrinks to match the surroundings
  3. Don’t over-set height. When you want it, set only a minimum with min-height
  4. Cap the maximum with max-width, and for text the ch unit is handy too

Try it: photo size, and a readable width for text

Let’s give Shima’s rounded photo a proper size. We’ll also give the greeting text a readable width.

figure img {
  width: 160px;
  height: 160px;
}
p {
  max-width: 32ch;
}

The photo, which was round but all different sizes, becomes a clean, perfect circle at 160×160 pixels. The greeting text now wraps at a width of 32 characters.

Browser view. Shima’s round photo is tidied into a proper perfect circle, and the greeting text wraps at a readable width
The photo now has a proper size, and the text a width that isn’t too long. Both are a step toward readability.

FAQ

A percentage of what, exactly?
It's a percentage of the size of the parent that wraps that part. width: 50% means 'half of the parent's width.' The basis is the box one level out, not the screen itself.
Why doesn't width work even though I set it?
Parts that point to a piece of text, like span or a (inline parts), don't accept width or height. The display property you'll learn in the next lesson lets you switch them into a kind of part that can take a width.
Should I use width or max-width?
As a rule of thumb: width for parts you want pinned to an exact size, like icons or photos; max-width for things you want to shrink to fit the screen, like text or cards.