按钮高度大于嵌套内容的高度

Question

我正在使用引导程序 4 alpha。

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

小提琴

我在按钮内嵌套了一个 div。我在 div 上设置了高度和宽度。我的按钮宽度适合 div，但按钮的高度比它需要的要大。当您单击按钮时，蓝色轮廓不适合内容。

为什么会发生这种行为？

Answer 1

这是inline-block自然造成的。内蒙古div按钮是inline-block。其默认值vertical-align: baseline会产生额外的间隙。如果您为您设置了( , , )以外的div某些值，则按钮将具有预期大小（内容宽度 +边框）。vertical-alignbaselinetopmiddlebottom102x1021px

vertical-align: baseline从这个答案中解释：

由于浏览器默认将vertical-align属性计算为baseline，这是默认行为。下图显示了基线在文本上的位置：

基线对齐的元素需要保持空间的下伸延伸基线（如下图所示j，p，g等），你可以在上面的图片中看到。

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