What is the calculation process of margin-top percentage?

Question

I know this should be simple, but can anyone tell me why the child elements in the following code are outside the bounds of the parent container when margin-top: 50% is applied? How is the percentage of margin-top calculated?

.container {  
  background: lightblue; 
  padding: 10px; 
  height: 200px;
}

p { 
  display: block; 
  border:1px solid red;
  margin-top:50%;
}

<div class="container">
<p> Some Cool content</p>
 
</div>

Shouldn't the child element be 50% of 200px (height set by the parent element) from the top of the parent element, that is, 100px from the top?

Answer 1

Percent-based margins are calculated based on the width of the parent container, regardless of which side the margins lie on.

So what you see is that the top margin is equal to 50% of the width.

Answer 2

From W3C Specification:

There are two good reasons to base vertical margins on the width of the containing block:

Horizontal and vertical consistency

Of course, there is a shorthand property that allows you to specify the margins on the four sides of the block:

margin: 10%;

This will expand to:

margin-top: 10%;
margin-right: 10%;
margin-bottom: 10%;
margin-left: 10%;

Now, if you wrote any of the above, you probably expected the margins to be equal sizes on all four sides of the block, right? However, if margin-left and margin-right are based on the width of the container, and margin-top and margin-bottom are based on its height, they will usually be different!

Avoid circular dependencies

CSS lays out content in vertically stacked blocks on the page, so the width of a block is usually determined entirely by the width of its parent element. In other words, you can calculate the width of the block without worrying about the content inside the block.

The height of the block is another matter. Typically, the height is determined by the combined height of its contents. Changing the height of the content will change the height of the block. See the problem?

To get the height of the content, you need to know the top and bottom margins applied to it. If those margins depend on the height of the parent block, then you're in trouble because you can't calculate one without knowing the other!

Vertical margins based on the width of the container break this circular dependency and make page layout possible.

Example:

This is an example. And the code:

HTML

<div class="container">
  <p id="element">一些很酷的内容</p>

</div>

<p>
  更多文本
</p>

CSS

.container {
  background: lightblue;
  padding: 10px;
  height: 100px;
  width: 500px;
}

p {
  display: block;
  border: 1px solid red;
  margin-top: 50%;
}

JS

window.onload = function(evt) {

  var element = document.getElementById("element"),
    style = element.currentStyle || window.getComputedStyle(element);

  element.textContent = "margin-top是：" + style.marginTop;
};