Example
It is obvious to assume that the percentage value of margin to margin-left and margin-right would be relative to its parent element.
.parent {
width : 500px;
height: 300px;
}
.child {
width : 100px;
height: 100px;
margin-left: 10%; /* (parentWidth * 10/100) => 50px */
}
But that is not the case, when comes to margin-top and margin-bottom. Both these properties, in percentages, aren't relative to the height of the parent container but to the width of the parent container.
So,
.parent {
width : 500px;
height: 300px;
}
.child {
width : 100px;
height: 100px;
margin-left: 10%; /* (parentWidth * 10/100) => 50px */
margin-top: 20%; /* (parentWidth * 20/100) => 100px */
}
