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

由于collapsing margins。

您可以通过在链接中添加du -hs来解决此问题：

display:inline-block

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

Answer 2

我不建议使用任何内联样式（高度），只需这样做：

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

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

Div没有采用全高度，因为它的子锚用填充物

2 个答案: