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

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，但按钮的高度比它需要的大。单击按钮时，蓝色轮廓不适合内容。

为什么会出现这种情况？

Answer 1

这归因于inline-block性质。按钮的内部div为inline-block。默认值vertical-align: baseline会产生额外的差距。如果您为div设置了除vertical-align（baseline，top，middle）按钮之外的bottom某个值的预期102x102 1}}尺寸（内容宽度+ 1px边框）。

来自this answer的vertical-align: baseline的说明：

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

基线对齐的元素需要为descenders保留在基线以下的空间（如j，p，g等），如上所示图像。

因此，只需从内部display: inline-block移除div即可查看预期结果。

Answer 2

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

希望这有帮助：）

Answer 3

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

您需要设置按钮的大小，然后使div内部填充按钮。

＆＃13;

＆＃13;

body {
    margin: 10px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我们通过在按钮上设置width:100px和height:100px，然后使用width:100%和height:100%填充可用的宽度和高度来实现此目的。< / p>

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

删除

Answer 4

我不知道为什么你会想要一个按钮内的div，但这就是我所做的：

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

这是jsfiddle。