CSS percentages: what are they a percentage of?
Set a property like width: 50% in CSS and the result can feel obvious — until it isn't. A percentage value in one context can behave very differently from the same value in another, and developers often end up tweaking the number until it happens to look right.
Amelia Wattenberger pushes back on that trial-and-error approach in a deep dive into how percentage values actually resolve across CSS properties. The post walks through the lesser-known rules and quirks with interactive demos that illustrate each case, from the obvious cases to the ones that regularly surprise.
.element {
margin-top: 40%;
}
