Albus Dumbledore
Albus Dumbledore

Reputation: 12616

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

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

Upvotes: 5

Views: 2636

Answers (6)

Kyle
Kyle

Reputation: 67244

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

Upvotes: 9

anon
anon

Reputation:

@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):

Demonstration of inline list markup

Upvotes: 1

jwueller
jwueller

Reputation: 31006

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

Upvotes: 2

Ben
Ben

Reputation: 57318

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 )

Upvotes: 1

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 263147

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

Upvotes: 1

Zeemee
Zeemee

Reputation: 10714

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

Upvotes: 1

Related Questions