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.

Software Engineer at AirAsia