為什么這個父 div 不尊重它的孩子的高度（帶填充）？

Question

我想創建一個以網頁內容區域為中心的按鈕/鏈接。 因為它是一個按鈕，而不僅僅是一個鏈接，我給它添加了一些填充和背景顏色。

鏈接水平居中，但填充似乎擴展到父元素的行高之外，導致它與上一個/下一個元素重疊。 見： http : //fths.convoke.info/what-c​​an-i-do/

我嘗試創建一個小提琴，但沒有看到同樣的問題： http : //jsfiddle.net/convoke/g9wu6ws9/

那么我錯過了什么？ 相反，有沒有更好的方法來使這樣的鏈接居中？ 我不喜歡使用margin: auto因為它需要你指定寬度。 理想情況下，寬度是動態的，所以如果按鈕上的文本更長或更短，它會保持居中。

Answer 1

在這種情況下，我需要的答案來自用戶@CBroe 在我原始問題的評論中。 他建議使用display:inline-block ，這很有魅力。

仍然不確定為什么我在小提琴和實際網站上得到不同的結果......