div 没有占据全高，因为它的子锚带有填充答案

【问题标题】：Div doesn't take full height as its child anchors with paddingdiv 没有占据全高，因为它的子锚带有填充
【发布时间】：2016-02-03 21:11:34
【问题描述】：

我想知道为什么带有顶部和底部填充的锚标记不会将其父 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 仍然与链接不具有相同的高度。

【问题讨论】：

两个答案都不错但是Flex is not compatible with some of the older browsers，即IE。

标签： html css

【解决方案1】：

因为collapsing margins。

您可以通过将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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：