The margin and padding of an element in percentage value
are calculated relative to the width of its parent element.
If an element has no parent element, the percentage value is
taken relative to the viewport's dimensions.
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.