CSS Measurement Units – Absolute vs. Relative

Chapter 1 – Introduction to CSS Units

  • Two broad categories of CSS measurement units:
    • Absolute units – fixed, never scale.
    • px (pixel) – already used throughout the course.
    • pt (point), in (inch), cm, mm – primarily for print media, rarely/never for the Web; instructor removes them from discussion for simplicity.
    • Relative units – computed in relation to another value.
    • \% – percentage of the parent element’s relevant dimension.
    • vw & vh – percentage of the viewport’s width and height respectively.
    • em & rem – multiples of font size (local element or root).
  • “Which unit you use depends on the problem you’re solving.”

Chapter 2 – Fixed-Size Box (Pixels)

  • Example markup: a single
    …
    .
  • Initial styles:
    • width:100\,px;
    • height:100\,px;
    • background\text{-}color:gold;
  • Demonstration:
    • No matter how large or small the screen, the box remains 100\times100 px.
    • Resizing the browser window confirms fixed dimensions.
  • Common criticism: pixels are “not scalable” → supposedly should be avoided for responsive design.
  • Counter-argument (use-case): border thickness.
    • Added: border\text{-}top:3\,px\ solid\ orange;
    • Requirement: border must remain exactly 3\,px on any device.
    • Pixel values therefore still valuable for precise, non-scaling elements.

Chapter 3 – Percentages & the Parent Element’s Width

  • Change width declaration: width:50\%; (height left at 100\,px or unset).
  • Parent of .box is .
    • Initially body has no explicit width; add width:300\,px; to illustrate math:
    • 50\% of 300\,px = 150\,px.
    • DevTools confirmation: width=150\,px.
  • Important concept: All relative values are eventually resolved to pixels by the browser.
  • Remove body\ width → what is default width?
    • is a block-level element → default width:100\%;
    • Therefore .box expands to 50\% of full page width.

Chapter 4 – Responsive Behavior & Body Margin

  • Margin on body (added earlier in course) creates visible gutter.
    • Commenting out margin makes .box truly occupy exactly 50\% of page width.
  • When browser window resizes, .box width adjusts proportionally → key benefit of relative units (percentages) for responsive layouts.

Chapter 5 – 100% Height Pitfall & Block Elements’ Default Height

  • Attempt: height:100\%; expects .box to fill full vertical space but disappears.
  • Diagnostic: create temporary empty
    after .box, inspect dimensions.
    • Width equals viewport width (e.g. 550\,px on instructor’s screen).
    • Height registers 0\,px because block elements’ default height is auto → equals content height; with no content, that is 0.
    • Adding “hello” text increases height (e.g. 18\,px), proving point.
  • Why .box collapsed:
    • height:100\%; is relative to parent (body).
    • body has no explicit height → defaults to auto (here 0 because only fixed border inside).
    • Only absolute length used so far is the 3\,px top border; body’s computed height therefore 3\,px, so .box interior unseen.

Chapter 6 – Viewport Units (vh & vw)

  • Solution: change height:100\%; to height:100vh;.
    • 1vh = 1\% of viewport height ⇒ 100vh fills full visible vertical area.
    • Box now stretches full height and scales when browser window height changes.
  • vw behaves analogously for width:
    • 50vw ⇒ box width equals 50\% of viewport width (same final look as earlier 50\% relative to body, but independent of ancestor widths).

Chapter 7 – Font-Relative Units (em)

  • em pronounced “em” or “m”; both acceptable.
  • Use-case: want layout dimensions to scale with font size (e.g. accessibility—user increases default font).
  • Example: width:10em;
    • 1em = current element’s computed font size.
    • Font-size lookup chain:
      1) Element’s own font\text{-}size declaration.
      2) Otherwise inherits from parent, walking up DOM until root ().
    • Browsers default font size to 16\,px.
    • Therefore, with no explicit sizes anywhere, 10em = 10\times16 = 160\,px. (DevTools confirmation.)
  • Set explicit font\text{-}size:20\,px; on .box → 10em = 200\,px.
  • Problem: Mental calculation can become cumbersome when inheritance chain is long; must trace to find effective font size.

Chapter 8 – Root-Relative Unit (rem)

  • rem = “root em”.
    • Always multiplies by root element’s font size (i.e.
      ), skipping inheritance traversal.
    • Makes reasoning simpler: only one reference value.
  • Example: width:10rem; under default 16\,px root size ⇒ 160\,px.
  • Larger value: width:15rem; ideally 15\times16=240\,px; can be tedious to multiply.
  • Convenience trick: set root font-size to 62.5\% of default 16\,px.
    • Calculation: 16\times0.625 = 10\,px.
    • Now each 1rem ≈ 10\,px → quick mental math (e.g. 15rem ≈ 150\,px).
    • CSS snippet:
      css html { font-size: 62.5%; /* 10px base for easy rem math */ }
    • Instructor verifies: DevTools shows .box width 150\,px.

Chapter 9 – Demonstration with Text & User Settings

  • Add

    element with lorem ipsum after .box.

  • Users can change browser’s default font size (Chrome Settings → Appearance → Font Size).
    • “Medium” = default 16\,px.
    • Choosing “Very large” increases root font size; both paragraph text and .box width expand (because .box uses rem/em units) → accessibility improvement; layout adapts.
    • Conversely, “Very small” compresses both.
  • Highlights why font-relative units enhance responsiveness and user experience.

Chapter 10 – Summary & Best-Unit Philosophy

  • Final example uses three different unit types simultaneously:
    • px – for fixed border height 3\,px (precision, non-scaling).
    • vh – ensures box fills full viewport height regardless of content.
    • rem – lets box width adapt to root font size, respecting user preferences.
  • Key takeaway: “There is no single best unit.” Choose based on specific design problem and required behavior (fixed vs. scalable vs. font-dependent).

Additional Connections & Practical Tips

  • Absolute units like in, cm, mm align with print-CSS or PDF generation; rarely appropriate for responsive Web UIs.
  • Pixels correspond to device-independent CSS pixels—not necessarily physical screen pixels; modern devices deploy pixel-density abstraction (device-pixel-ratio).
  • Use percentages for fluid grids where dimension should be tied to parent container rather than entire viewport.
  • Combine units creatively: e.g., calc(100vh − 3rem) to subtract header height from viewport filling section.
  • Ethical/personal-accessibility note: designs based solely on pixel units can hinder users with low vision who rely on browser zoom or default-font changes; relative units promote inclusivity.