CSS - Issue with link padding inside container

Question

I have some buttons inside a container. These buttons have a padding as you can see on the image below. I need the container doesn't ignore the padding.

I've tried box-sizing with no success.

Here you have the HTML code:

<br />
<div style="background-color:#0f0;">
    <a href="#" class="button">EDIT CART</a> ......
    <a href="#" class="button">UPDATE</a> ......
    <a href="#" class="button">PROCEED TO CHECKOUT</a>
</div>

<br /><br /><br />

<div style="background-color:#0f0;width:200px;">
    <a href="#" class="button">EDIT CART</a> ......
    <a href="#" class="button">UPDATE</a> ......
    <a href="#" class="button">PROCEED TO CHECKOUT</a>
</div>

Here you have the CSS code:

.button {
    color: #fff;
    background-color: #0778bd;
    font-family: "Tahoma";
    font-size: 25px;
    text-decoration: none;
    padding: 20px 25px;
}

And here you have the JSFiddle link: https://jsfiddle.net/ox6yzpfa/

Any idea on how to solve this? Please, if you get it working, give me back a JSFiddle link with the code fixed.

Answer 1

a is an inline element, which does not have vertical layout or affect other elements in the DOM vertically. To give an a element vertical layout, so it can affect elements around it vertically, make the element display: block; or display: inline-block; depending on your needs. Here's a demo https://jsfiddle.net/ox6yzpfa/1/