An interesting CSS fact that blew my mind

I am a software developer by profession and I thought I knew CSS pretty well till I stumbled upon this today: “Any margin or padding specified as a percentage is calculated based on the width of the containing element”

This means margin-top: 10% essentially translates to: the margin on the top of the current element is set to 10% of the width of the containing element and not its height, as is assumed by many(including myself). Interestingly, the reason why the specification is written this way is still, technically, unknown.