Margin in percentage not working as expected

[fozail]

Hi Guys,

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:

<div style="background-color:#cccccc;text-align:center;height:20px;padding-top:25%">Lets see...</div>

Can someone please throw a light on this?

[Kor]

% for padding or margins means % from the element's (the DIV) size, not from the BODY's size.

[fozail]

Hi Kor,

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.

[Kor]

Post a link to a test page

[fozail]

Here you go:

http://www.fmrwebdesign.com/css-margin.html

[Kor]

Probably it depends on the browser. I guess that you try to center vertically somehow your DIV. That is a weakness of the CSS, so far. Google for: CSS vertical center - there are a lot of workarounds.

[fozail]

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?

[Kor]

I just wanna know why by specifying 25% margin the div is almost in the middle of the page?

I guess you have already answered yourself that question. It looks like it is not

[adam.coward]

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.

[cbVision]

This article explains it:
http://www.mattsnider.com/css-using-...n-and-padding/

Apparently, it multiples the percentage by the width of the container as Adam noted.

Test by shrinking your browsers width and watch the bar move up and down.