title: CSS: Get child element to respect parent's padding-bottom
body: <p>I have an element with height, padding, and overflow:hidden. Its child element respects the top and side paddings, but it overlaps into the parent's padding-bottom. How do I prevent this?</p>
  
  <p><a href="http://jsfiddle.net/va78jsm5/" rel="nofollow noreferrer">http://jsfiddle.net/va78jsm5/</a></p>
  
  <pre><code>#parent{
      background:yellow;
      overflow:hidden;
      width:100px;
      height:100px;
      padding:25px;
  }
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div id = "parent"&gt;
    &lt;div id = "child"&gt;  
        text text text text text text ...
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Edit: in response to the suggestion that this is the same as <a href="https://stackoverflow.com/questions/8981811/overflowhidden-ignoring-bottom-padding/33163094#33163094">overflow:hidden ignoring bottom padding</a>, it's not. The final answer to my question is so much more elegant than any of the answers to that other question because my setup is different: I only have one child element.</p>