在css按钮周围创建一个区域

Question

好的，所以我目前正在使用HTML中的<a>标签，这是我的css

#button {
  border-style: solid;
  border-width: 1px;
  border-bottom-width: 5px;
  width: auto;
  padding-left: 2px;
  padding-right: 2px;
  text-decoration:none;
  color: gray;
}
#button:hover {
  color: black;
}

但遗憾的是，按钮比标准线大，只是相互重叠，例如： 这是一些文字[按钮] 这里还有一些文字[按钮]

如果[按钮]位于另一个的下方/顶部，则它在浏览器中重叠（如果这是有意义的）

以下是截图：

我怎样才能这样做呢？它会在它周围形成一种区域，它不能重叠并将其他元素向外推或左右，边缘似乎不起作用（顶部和底部什么都不做）和填充似乎使1px边框更高，谢谢！

Answer 1

添加     显示：内联块; 你的按钮选择器，例如：

#button {
        border-style: solid;
        border-width: 1px;
        border-bottom-width: 5px;
        width: auto;
        padding-left: 2px;
        padding-right: 2px;
        text-decoration:none;
        color: gray;
        display:inline-block;
    } 

顺便说一句，我建议按钮是一个类而不是一个id，因为你不应该在同一个页面上有多个具有相同id的元素。

Answer 2

示例中的行之间的距离太短，无法显示由边框包围的按钮文本，其中包含适合该行的空格。

所以我觉得增加默认文本的line-height。

这是一个例子：JSFiddle-Example