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

【问题标题】：Button height is greater than the nested content's height按钮高度大于嵌套内容的高度
【发布时间】：2018-01-07 11:56:05
【问题描述】：

我正在使用 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

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

为什么会出现这种情况？

【问题讨论】：

为什么你需要一个 div 里面的按钮？
@Toastrackenigma 也许我想创建一个具有多个可点击元素的区域
那你做错了。 ANY 点击按钮将激活按钮父级上的脚本（除非您正确处理事件），并且它不是语义 - 尝试使 多个按钮来处理每个点击事件我>。如果您想在单击一个按钮时触发多个事件，请了解事件在 JavaScript 中的工作原理
这能回答你的问题吗？ How to get rid of extra space below svg in div element

标签： html css bootstrap-4

【解决方案1】：

您可以删除 btn 内 div 上的 display: inline-block 并删除 btn border: none 的边框（以删除 btn 内的白色填充）。所以现在里面的div自动是display: block

希望有帮助:)

【讨论】：

Div 元素在所有浏览器中默认显示为块级元素

【解决方案2】：

简单地说，按钮不是100px 宽或高。

你需要设置按钮的大小，然后让里面的div填充按钮。

body {
    margin: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

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

我们通过在按钮本身上设置width:100px 和height:100px 来做到这一点，然后用width:100% 和height:100% 使里面的div 填充可用的宽度和高度。

按钮周围还有一个1px 宽边框，您应该使用border-style:none 删除它

【讨论】：

【解决方案3】：

我不知道你为什么要在按钮中添加一个 div，但这就是我所做的：

我将width和height设置为按钮，并将嵌套div的width和height设置为100%。这将使嵌套的 div 与按钮的大小相同。

这里是jsfiddle。

【讨论】：

【解决方案4】：

这是由于inline-block 的性质。按钮的内部div 是inline-block。 vertical-align: baseline 的默认值会产生额外的间隙。如果您为您设置div vertical-align 的某个值而不是baseline（top、middle、bottom）按钮将具有预期的102x102 大小（内容宽度+1px 边框） .

来自this answer的关于vertical-align: baseline的解释：

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

如上图所示，基线对齐元素需要为延伸到基线下方的descenders（如j、p、g 等）保留空间。

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

【讨论】：