Button height is greater than the nested content's height

Question

I am using bootstrap 4 alpha.

<button class="btn btn-link p-0">
  <div style="display:inline-block; background-color:#c2f5ff; width: 100px; height: 100px;">
  </div>
 </button>

Fiddle

I nested a div inside a button. I set height and width on the div. My button width fits the div, but the height of the button is bigger than it needs to be. When you click on the button, the blue outline does not fit the content.

why is this behavior occurring?

Answer 1

This is due to inline-block nature. Inner div of button is inline-block. Default value of vertical-align: baseline which creates extra gap. If you set for you div some value of vertical-align other than baseline (top, middle, bottom) button will have expected 102x102 size (width of content + 1px borders).

---

Explanation about vertical-align: baseline from this answer:

As browsers by default compute the vertical-align property to baseline, this is the default behaviour. The following image shows where the baseline is located on text:

Baseline aligned elements need to keep space for the descenders that extend below the baseline (like j, p, g etc) as you can see in the above image.

---

So just remove display: inline-block from your inner div to see expected result.