CSS - 容器内链接填充的问题

Question

我在buttons内有一些container。您可以在padding上看到这些按钮image below。我需要容器不要忽略填充。

我已经尝试box-sizing但没有成功。

这里有HTML代码：

<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>

这里有CSS代码：

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

此处您有JSFiddle个链接：https://jsfiddle.net/ox6yzpfa/

关于如何解决这个问题的任何想法？如果你使用它，请给我一个JSFiddle链接，修复代码。

Answer 1

默认情况下，锚标记是inline元素，缺少框模型。您需要将display设置为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! */
}

小提琴：https://jsfiddle.net/u37Ljn3g/

Answer 2

a是一个内联元素，它没有垂直布局或垂直影响DOM中的其他元素。要为a元素提供垂直布局，以便它可以垂直影响它周围的元素，根据您的需要创建元素display: block;或display: inline-block;。这是一个演示https://jsfiddle.net/ox6yzpfa/1/

Answer 3

您正在尝试将填充分配给内联元素，请尝试以下操作：

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