To know why this is the right answer we have to dig into how the CSS percentage unit works, the percentage unit is a CSS relative unit so it has to be relative to an absolute value, and this is summary of how it works with different properties:
margin, padding, left, right
It will be relative to element's parent width (even top and bottom margin/padding will be relative to the parent’s width)
top, bottom
It will be relative to element's parent height
transform
It will be relative to the element itself, either its width or its height.
So here we are working with padding top and left properties, and both are relative to the #container's width and be calculated based on its value.
To know why this is the right answer we have to dig into how the CSS percentage unit works, the percentage unit is a CSS relative unit so it has to be relative to an absolute value, and this is summary of how it works with different properties:
So here we are working with padding top and left properties, and both are relative to the
#container's width and be calculated based on its value.You can find more about this here 😄👇
CSS percentage unit, the evil parts
Abdelrahman Ismail
Your explanation is very straightforward and convincing... I will definitely fiddle with this. Thanks so much. @Abdelrahman . :)
You're welcome, I'm glad that you benefited from this. 😄😄