title: Make parent padding cut off child element
body: <p>I have a square parent container that has a 2% padding on all 4 sides. I have a smaller rectangle that spills over the bottom. I am setting the height of the shape relative to it's parent container. I know I can use <code>overflow:hidden</code> but that simply contains the child element, it doesn't make the child respect the parent's padding. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.parent {
     border-radius: 15px;
     background: #cccac9;
     position: absolute; 
     top: 50%; 
     left: 50%; 
     height: 30%; 
     width: 60%;
     transform: translate(-50%, -50%);
     padding: 2%; 
     overflow:hidden;
  }
   
  .child {
    background: #1c1c1c; 
    position: relative; 
    height: 30%;   
    color: White; 
    text-align: center; 
    padding-top: 8px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='parent'&gt;
    &lt;div class='child'&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/HdsY4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HdsY4.png" alt="Item I&#39;m working with. "></a></p>
  
  <p>The grey background is the parent, the black box in the bottom is it's child. The bottom black box is bleeding over the grey parent container's padding. </p>