CSS:我希望我的链接看起来像按钮，但它们重叠

Question

为了让我所有的链接看起来像按钮，我在我的 CSS 中做到了这一点:

a {
  color: #06A;
  text-decoration: underline;
  margin: 10px 20px;
  padding: 10px 20px;
  /*background-color: #EEE;*/
  border: #BBB solid 1px;
}

它们看起来不错，但是，它们似乎混淆了，也就是说它们的位置好像没有填充或边距。

看看这里，如果你还是不明白我的意思:http://picasaweb.google.com/lh/photo/1yjC0oyQUbBlo_2D4RqjLZsCgnyUSAKTKup5o2EMfkM?feat=directlink

Answer 1

<a>从本质上讲，它是一个内联元素，这意味着它不能被赋予宽度、高度、填充或边距(以及一些其他样式)。

要更改它，只需添加 display: block;这会将它变成一个 block 级元素，启用填充、边距等。

如果您想要保持流畅但能够接受这些样式的内容，请使用 display: inline-block; .这也适用于其他内联元素，如 <span> .