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的自動內部包裝