Div 不会占用全高，因为它的子锚点带有填充

Question

我想知道为什么带有顶部和底部填充的锚标记不会将其父 div 扩展到其全高。例如在这个小提琴中

<div class="container">
  <a href="#" class="button">Sign Up</a>
  <a href="#" class="button">Login</a>
</div>

https://jsfiddle.net/exleedo/8qr4srLa/

父级有灰色背景，两个按钮在这个 div 内，但 div 仍然没有与链接相同的高度。

Answer 1

因为崩溃的利润。

您可以通过添加display:inline-block到链接来解决此问题：

.container {
    background: #CCC;
}

.button {
    padding: 10px 15px;
    border-radius: 5px;
    background: #262626;
    color: #FFF;
    margin-left: 10px;
    display: inline-block;
}

<div style="height:100px">
    <!-- Spacer -->
</div>
<div class="container">
    <a href="#" class="button">Sign Up</a>
    <a href="#" class="button">Login</a>
</div>