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 …

  • <!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>A super useful recap of the main ways that CSS calculates percentage for element layout, each with a brilliant slider-based demo. The …</p> </body> </html>
  • Murray Adcock.
Journal permalink