title: CSS - Issue with link padding inside container
body: <p>I have some <code>buttons</code> inside a <code>container</code>. These buttons have a <code>padding</code> as you can see on the <code>image below</code>. I need the container doesn't ignore the padding.</p>
  
  <p>I've tried <code>box-sizing</code> with no success.</p>
  
  <p>Here you have the <code>HTML</code> code:</p>
  
  <pre><code>&lt;br /&gt;
  &lt;div style="background-color:#0f0;"&gt;
      &lt;a href="#" class="button"&gt;EDIT CART&lt;/a&gt; ......
      &lt;a href="#" class="button"&gt;UPDATE&lt;/a&gt; ......
      &lt;a href="#" class="button"&gt;PROCEED TO CHECKOUT&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  
  &lt;div style="background-color:#0f0;width:200px;"&gt;
      &lt;a href="#" class="button"&gt;EDIT CART&lt;/a&gt; ......
      &lt;a href="#" class="button"&gt;UPDATE&lt;/a&gt; ......
      &lt;a href="#" class="button"&gt;PROCEED TO CHECKOUT&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here you have the <code>CSS</code> code:</p>
  
  <pre><code>.button {
      color: #fff;
      background-color: #0778bd;
      font-family: "Tahoma";
      font-size: 25px;
      text-decoration: none;
      padding: 20px 25px;
  }
  </code></pre>
  
  <p>And here you have the <code>JSFiddle</code> link: <a href="https://jsfiddle.net/ox6yzpfa/" rel="nofollow noreferrer">https://jsfiddle.net/ox6yzpfa/</a></p>
  
  <p><a href="https://i.stack.imgur.com/hieJL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hieJL.png" alt="CSS - Issue with link padding inside container"></a></p>
  
  <p>Any idea on how to solve this? Please, if you get it working, give me back a <code>JSFiddle</code> link with the code fixed.</p>