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;将其转换为块级元素,以启用填充,边距等.

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