Example 1
suggest changeIt 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 */
}
Found a mistake? Have a question or improvement idea?
Let me know.
Table Of Contents