Div doesn't take full height as its child anchors with padding

Question

I want to know why an anchor tag with top and bottom padding would not expand its parent div to its full height. eg here in this fiddle

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

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

The parent has grey background and the two buttons are inside this div, but still the div doesn't take the same height as the links.

Answer 1

Because of collapsing margins .

You can fix this by adding display:inline-block to your links:

 .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

I do not recommend any inline style (height for that matter) just do this:

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

display: flex will have the auto inner wrap similar to box-sizing