Display and sizing in CSS

How a box participates in layout, and the sizes that constrain it.

.badge {
  display: inline-block;
  min-width: 2rem;
  text-align: center;
}

.thumb {
  display: block;
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.hidden {
  display: none;
}

How it works

1. inline-block flows inline but keeps width and height.
2. min-width: 0 is the fix for flex children that refuse to shrink.
3. aspect-ratio sizes the second dimension for you.

Keywords and builtins used here

• badge
• display
• hidden
• rem
• thumb
• width

The run, in numbers

Lines

17

Characters to type

198

Tokens

53

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 42 seconds.

Type this snippet

Step 5 of 6 in Boxes, step 18 of 26 in Selectors & the box model.

← Previous Next →