I have never specified the value of margin as percentage. Just out of curiosity I did a little test. I specified 50% margin-top for a div thinking that it will add margin equal to 50% of the height of the body but the result comes out weird. It adds the margin but definitely not 50% . I tried the same with padding-top and it still has the the same sort of outcome. Here is the simple code:
Thanks for your reply, yes it makes sense it should be percent of the element (div) but still look at the code for the above div. It's a div with 20 px height but with margin-top:25% it moves to the middle of the page. If I add 50% it moves to almost the bottom of the page. There no other elements on the page, it is totall blank.
Hi Kor, You're right I was experimenting with a workaround to get the div verticaly centered but now the issue isn't that, I just wanna know why by specifying 25% margin the div is almost in the middle of the page?
When specified as a percentage, margin and padding always relate to the width of the containing element, not it's height. This happens regardless of whether you are setting top, right, bottom or left margin/padding.