Using percentages for margin and padding

HTML & CSS
1

When you set a margin or padding percent value for an element, is this value determined by what dimensional value and unit the parent is made with?

Here’s a VERY generic example…

Markup:


<body>
  <div id="[B]outer[/B]">
    <div id="[B]menu[/B]"></div>
    <div id="[B]block[/B]"></div>
  </div>
</body>

CSS:


[B]#outer[/B]{margin-right:auto;margin-left:auto;width:600px;height:600px;float:left}
[B]#menu[/B]{width:100%;height:2%;float:left}
[B]#block[/B]{margin-top:2%;margin-right:auto;margin-left:auto;width:80%;height:80%;float:left}

If #block is using margin-top the way it is (with percentages), is this final margin value relative to its parent, #outer, or is it relative to its OWN width and height dimensions? The reason I ask this is because I tried a similar approach with something today and decided that it’s time to figure out why, exactly, #block doesn’t seem to be making the exact and precise space for #menu.

2

When you use percents on the margin/padding then it is relative to it’s OWN WIDTH only. Not height. Not even if you do margin-top:100%. The computed value will be 100% of it’s width.

For exmaple, if you did margin-top:50%; and the width on the element was 800px, it would move it down 400px :slight_smile:

3

Ah. I see. Thanks Ryan!

4

You’re welcome :).