<b>There is HTML with a nested stylesheet:</b> <pr

There is HTML with a nested stylesheet:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Margin test</title>
    <style type="text/css">
      #div1 {
        position: absolute;
        width: 200px;
        height: 100px;
        border: none;
        padding: 0;
        background: green;
      }

      #div2 {
        margin-top: 20%;
        border: none;
        padding: 0;
        background: red;
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="div1">
      <div id="div2">*</div>
    </div>
  </body>
</html>

What will be the margin-top value for the block with identifier div2 calculated in pixels?

Explanation

To calculate the percentage value for the indentation of the element (including margin-top and margin-bottom), the width of the parent block (which contains this element) is always taken as a basis.