The margin and padding of an element in percentage value
are calculated relative to the width of its parent element.
Let's look at an example for margin property:
The margin value for the child-element is calculated as
10% of the width of the parent-container.
10% of 150px is 15px.
So, margin: 10% will mean here, margin: 15px.
The same reasoning applies to the padding property:
The padding value for child-element remains as 10%
of the width of the parent-container.
10% of 150px is 15px.
So, padding: 10% will mean here, padding: 15px.