title: How to calculate padding-top in % of the given div relative to its parent div
body: <p><strong>Problem: I want to add padding-top in % to all list items</strong> (because I need to move the text a little down and also need all elements to be scalable), <strong><a href="https://jsfiddle.net/hg2cfqhk/" rel="nofollow">here is jsfiddle code</a></strong></p>
  
  <p>Height works fine. In order to calculate height I calculated the percentage of li height(which originally was 40px) relative to its parent ul(which was 400px). 40px out of 400px = 10%. It seems to work fine after that total ul height is still equal to 400px. (box has height of 53.33vw bacause 400px is 53.33% of 750px).</p>
  
  <p><strong>But the problem is with calculating padding-top in %.</strong> In order to calculate padding-top (which was 8px) I needed to calculate 8px out of 400px(400px is the height of the parent ul) = 2%, and as in fixed layout I subtracted those 2% from height (10% so height was now 8%). But after that the total ul height is equal to 470px. How to calculate padding-top in % so that height of ul still will be 400px? I need to preserve those 400px which was the original height of the ul, after adding the padding-top in % the height of ul becomes 470px which is not correct.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="box"&gt;
  &lt;ul class="list"&gt;
  &lt;li&gt;Item 1&lt;/li&gt;
  &lt;li&gt;Item 2&lt;/li&gt;
  &lt;li&gt;Item 3&lt;/li&gt;
  &lt;li&gt;Item 4&lt;/li&gt;
  &lt;li&gt;Item 5&lt;/li&gt;
  &lt;li&gt;Item 6&lt;/li&gt;
  &lt;li&gt;Item 7&lt;/li&gt;
  &lt;li&gt;Item 8&lt;/li&gt;
  &lt;li&gt;Item 9&lt;/li&gt;
  &lt;li&gt;Item 10&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
      line-height: 1;
  }
  
  /* THIS IS MY CODE*/
  
  .box {
      margin:0 auto;
      width:100%;
      max-width:750px;
      height:53.33vw;
      max-height:400px;
  }
  
  ul.list {
      padding: 0;
      width:100%;
      height:100%;
      background:green;
      list-style-type:none;
      text-align:center;
      font-size:3vw;
  }
  
  ul li:nth-child(odd) {
      height:8%;
      width:interit;
      padding-top:2%;
      background:grey;
  }
  
  ul li:nth-child(even) {
      height:8%;
      width:interit;
      padding-top:2%;
      background:red;
  }
  </code></pre>