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.