Retour au cours

Lesson 22: Understanding CSS Units: Pixels (px) and Percentage (%)

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

22. Understanding CSS Units: Pixels (px) and Percentage (%)

CSS needs units to quantify dimensions, spacing, and font sizes. We categorize them as absolute (fixed) or relative (fluid/scalable).

1. Absolute Units: Pixels (px)

Pixels are the standard fixed unit. 1px refers to one physical dot on the screen (though modern screens complicate this, conceptually it's a fixed size).

  • Usage: Define specific, unchangeable sizes for borders, shadows, or when you need guaranteed precision.
  • Pros: Precise and predictable.
  • Cons: Not scalable for different devices. Fixed text sizes can be hard for users with low vision to scale.

css .icon { width: 32px; height: 32px; }

.divider { border-bottom: 1px solid #ccc; }

2. Relative Units: Percentage (%)

Percentage units are relative to the dimension of the immediate parent element.

  • Usage: Creating fluid layouts where elements scale with the container size.
  • Pros: Excellent for responsive design and fluid containers.
  • Cons: Can be confusing. If a child element has width: 50%, and its parent has width: 50% of its parent, the child ends up being 25% of the original grandparent.

css .parent { width: 800px; }

.child { width: 50%; /* 400px wide / padding: 5%; / 5% of 800px = 40px padding */ }