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

Question

好的，我目前正在为我的 <a> 使用它HTML 中的标签，这是我的 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

添加 显示:内联 block ；到您的按钮选择器，例如:

#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 的元素。