CSS: I'd like my links to look like buttons, but they overlap

Question

In order to make all my links looks like buttons, I've done that in my CSS:

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

They look fine, however, they seem to mix-up, that is they are being positioned as if they had no padding or margins.

Take a look here, if you still don't see my point: http://picasaweb.google.com/lh/photo/1yjC0oyQUbBlo_2D4RqjLZsCgnyUSAKTKup5o2EMfkM?feat=directlink

Answer 1

<a> is by nature and definition an inline element, meaning that it can't be given widths, height, paddings or margins (along with a few other styles).

To change that, simply add display: block; which will turn it into a block level element enabling paddings, margins etc.

If you want something that will stay in the flow but be able to accept these styles, use display: inline-block;. This also applies to other inline elements like <span>.

Answer 2

The easiest solution is to set the line-height correctly (without changing display).