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

EN

这是由于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从内部div中删除，以查看预期的结果。

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

希望有此帮助:)

简单地说，该按钮不是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，然后让内部的div用width:100%和height:100%填充可用的宽度和高度。

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