按钮高度大于嵌套内容的高度 [英] Button height is greater than the nested content's height

问题描述

我正在使用bootstrap 4 alpha.

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

的空间(例如<如上图所示，请参见code> j ， p ， g 等.

---

因此只需从内部 div 中删除 display:inline-block 即可看到预期的结果.

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?

解决方案

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.

这篇关于按钮高度大于嵌套内容的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！