What does 100% mean in CSS | Amelia Wattenberger

A super useful recap of the main ways that CSS calculates percentage for element layout, each with a brilliant slider-based demo. The tl;dr:

  • The width and height elements are based on the parent's dimensions;
  • So are positioning attributes such as top and right;
  • Both margin and padding attributes inherit from the parent, but only use the width value (even for things like margin-top);
  • The transform property uses the element's dimensions.

Explore Other Notes

⬅ Newer

Firefox and SVG fill for CSS
I ran into a bug recently where some SVGs on a website were seemingly ignoring a fill request. A quick check in dev tools showed that the CSS was being applied so... what gives? Turns out […]

Older ➡

Fantasy kindreds of Saynim
Darrell is one of those authors who really considers the world-building side of their work, so I've long found their blog fascinating. Recently, they've released a series of posts on the background […]
  • A super useful recap of the main ways that CSS calculates percentage for element layout, each with a brilliant slider-based demo. The […]
  • Murray Adcock.
Journal permalink