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

Question

我在容器 中有一些按钮。这些按钮有一个填充，您可以在下面的图像 中看到。我需要容器不忽略填充。

我试过 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

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