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> 

Answer 2

我不推荐任何内联样式（高度），只需这样做：

.container {
background: #CCC;
display: flex;
}

display：flex将具有类似于box-sizing的自动内部包装