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

Question

我正在使用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，但是按钮的高度比实际需要的要大。当你点击按钮时，蓝色的轮廓框不适合内容。

为什么会出现这种情况？

- Wayn Chaw

---

为什么需要在按钮内部使用 div？ - Toastrackenigma

@Toastrackenigma 或许我想要创建一个区域，其中有多个可点击的元素。 - Wayn Chaw

那你做错了。任何点击按钮都会激活按钮父级上的脚本（除非你正确处理事件），这不是语义化的 - 尝试制作多个按钮来处理每个点击事件。如果您想在单击一个按钮时触发多个操作，请学习JavaScript中的事件如何工作。 - Toastrackenigma

这个回答解决了你的问题吗？如何在 div 元素中消除 SVG 下方的额外空间 - MMalke

Answer 1

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

---

来自这个答案的关于vertical-align: baseline的解释：

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

基线对齐元素需要保留空间，以容纳延伸到基线以下的下降部分（例如 j, p, g 等），如上图所示。

---

所以，只需从您的内部

中删除display: inline-block，即可看到预期结果。

- Vadim Ovchinnikov

Answer 2

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

希望这能有所帮助 :)

- Victor Allegret

---

无论如何，所有浏览器默认情况下都将div元素显示为块级元素。 - Toastrackenigma

Answer 3

简单来说，按钮的宽度和高度不是 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将其移除。

- Toastrackenigma

Answer 4

我不知道为什么你想在按钮里面放置一个 div，但这是我所做的：

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

这里是 jsfiddle。

- flawy