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

In order to make all my links looks like b开发者_开发问答uttons, 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

<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>.

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

Use "display: block" to make padding and margin have a effect.

Try styling your links with display: inline-block;.

You may want to consider using the float style:

<a style='float:left' href='#' />

...which will let you do all the fun stuff and "help" position your anchors as a bonus.

(If you want things to stop floating, put clear:both )

@snowflake's question-level comment got me thinking.

It might help you to know that there are those who believe that using a list for this sort of content is better than marking up plain anchor tags (after all, this is a list of genres, is it not?).

The code for this would look a bit like this:

HTML:

<ul class="genrelist">
   <li><a href="#fantasy">Fantasy</a></li>
   <li><a href="#childrensliterature">Children's Literature</a></li>
   <li><a href="#speculativefiction">Speculative Fiction</a></li>
   <li><a href="#absurdistfiction">Absurdist Fiction</a></li>
   <li><a href="#fiction">Fiction</a></li>
   <li><a href="#wordicantread">Word I can't read</a></li>
</ul>

CSS:

.genrelist {
  list-style-type: none;
  overflow: hidden;
}

.genrelist li {
  /*background-color: #EEE;*/
  border: #BBB solid 1px;
  display: inline;
  float: left;
  margin: 10px 20px;
  padding: 10px 20px;
}

.genrelist li a {
  color: #06A;
  text-decoration: underline;
}

The code above would display like this (full-size image):