%

Put 10% on a child inside a box 400px wide and 300px tall and the answer depends on the property: width gives 40px, height gives 30px, margin-block-start gives 40px, and font-size gives a tenth of the parent’s text size. A percentage means nothing until you know which property it sits on, and every surprise in this unit comes from that.

The surprising ones first. padding and margin on all four sides are measured against the width of the box that contains them (its height in vertical text), so in that box margin-block-start: 10% is 40px and not 30px. line-height takes the font size of the element it sits on, and the result is turned into a length before it is inherited, so a child with larger text keeps the parent’s number, unlike a unitless line height, which is inherited as a ratio. translate uses the element’s own box, so translate: 50% on a 100px-wide element moves it 50px. The plainer ones: font-size uses the parent’s font size, so 120% is 1.2em; width and the horizontal offsets use the containing block’s width; height and the vertical offsets use its height, but only when that height is definite, and if the parent is as tall as its content, height: 50% has nothing to be half of and behaves as auto.

When a percentage misbehaves, find which of these it belongs to before changing the value.