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

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.