title: How can I have smaller bottom using the translate css property?
body: <p>I have a problem using the translate css function. </p>
  
  <p>I have HTML as below.</p>
  
  <pre><code>&lt;div class="outer-div"&gt;
    &lt;img src="https://www.visioncritical.com/wp-content/uploads/2014/12/BLG_Andrew-G.-River-Sample_09.13.12.png"/&gt;
    &lt;div class="inner-div"&gt;
      Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>You will notice that I have an outer div which has an image and an inner div with contents. I am pushing the inner div in negative y-axis by 40px using the translate CSS property. I am doing it using the sample css below:</p>
  
  <pre><code>.outer-div {
    background-color: blue;
    width: 400px;
    height: auto;
  }
  
  img {
    width: 100%;
    height: auto;
  }
  
  .inner-div {
    background-color: red;
    width: auto;
    height: 200px;
    transform: translate(0, -40px);
  }
  </code></pre>
  
  <p>However, by doing so, I now have a gap of 40px at the bottom of the div. I want to keep only 20px gap as shown in attached image.</p>
  
  <p><a href="https://i.stack.imgur.com/Dn1Yc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Dn1Yc.png" alt="enter image description here"></a></p>
  
  <p>How can I only have 20px at the bottom? I have also created a sample code-pen ( <a href="http://codepen.io/hellouniverse/pen/XNyzZX" rel="nofollow noreferrer">http://codepen.io/hellouniverse/pen/XNyzZX</a> ) to show the issue</p>