Html 为什么这个父div不尊重子div的高度（带填充）？

我想创建一个以网页内容区域为中心的按钮/链接。因为它是一个按钮，而不仅仅是一个链接，我给它添加了一些填充和背景色

链接水平居中，但填充似乎扩展到父元素的线高度之外，导致其与上一个/下一个元素重叠。见：

我试着做了一把小提琴，但没有看到同样的问题：

---

那么我错过了什么？相反，有没有更好的方法来将这样的链接居中？我不喜欢使用margin:auto，因为它需要您指定宽度。理想情况下，宽度是动态的，因此，如果按钮上的文本较长或较短，它将保持居中。

在这种情况下，我需要的答案来自我原始问题的评论中的user@CBroe。他建议使用display:inlineblock，这很有魅力

---

仍然不确定为什么我在fiddle和实际网站上得到不同的结果…

为链接添加display:inline块，这将扩展div元素的行框。谢谢！实际上我试过使用display:block，但没有用。我知道我错过了一些简单的事情。