内联块父 - 不比孩子高吗？

Question

我有一个inline-block div，我不想比它的孩子高。这可以实现吗？

此处说明了目前发生的事情（添加颜色）：

＆＃13;

＆＃13;

.agenda-btn-container {
  display: inline-block;
  background-color: pink;
}

#agenda-view-start-btn {
  background-color: gray;
}

#agenda-view-previous-btn {
  background-color: gray;
}

＆＃13;

<a class='agenda-btn-container' id='agenda-view-btn-container-previous' href='#'>
  <i id="agenda-view-start-btn" class='i-vb-angle-double-left i-space--right'></i>
  <span id="agenda-view-previous-btn">Previous</span>
</a>

＆＃13;

＆＃13;

＆＃13;

基本上，我想要的最终产品会消除顶部和底部的粉红色空间，使父级高度为#agenda-view-previous-btn。最初，我可以通过将父级设置为display: inline来做到这一点，但不幸的是，由于跨浏览器问题，父级需要inline-block（或block工作也是如此，但我不确定这会带来什么不同。）

Answer 1

添加line-height：normal以重置继承的行高。

.agenda-btn-container{
    display: inline-block;
    background-color: pink;
    line-height: normal;
}