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/

Answer 2

By default, anchor tags are inline elements and lack the box-model. You need to set the display to inline-block:

.button {
  color: #fff;
  background-color: #0778bd;
  font-family: "Tahoma";
  font-size: 25px;
  text-decoration: none;
  padding: 20px 25px;
  display: inline-block;         /* Add this! */
}

Fiddle: https://jsfiddle.net/u37Ljn3g/

Answer 3

you are trying to assign padding to an inline element, try this:

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