CSS

Lesson 01

Box model sizing

Make element dimensions predictable when padding and borders are part of the component.

Good Code

pricing-card.css
*,
*::before,
*::after {
  /* Border-box keeps declared sizes honest when padding and borders grow. */
  box-sizing: border-box;
}

.pricing-card {
  width: min(100%, 24rem);
  padding: 1.5rem;
  border: 1px solid #d8dee8;
}

.pricing-card__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Bad Code

pricing-card.css
.pricing-card {
  /* Width ignores padding and border, so the real footprint is larger. */
  width: 24rem;
  padding: 24px;
  border: 1px solid #d8dee8;
}

.pricing-card__media {
  width: 24rem;
}

Review Notes

What to review

Good Code

The good version makes the declared card width include its padding and border, so the component can shrink inside narrower containers without surprise overflow.

Bad Code

The bad version looks simple, but its rendered width is wider than 24rem after padding and border are added, and the media element repeats the fixed size instead of adapting to the card.

Takeaways

  • Prefer border-box sizing so declared component width includes padding and borders.