CSS - Why am I not able to set height and width of <a href> elements?

Question

Hi, I'm trying to create css buttons by using the following html markup:

<a href="access.php" class="css_button_red">Forgot password</a>

But it ends up being not bigger than the text in the middle. Even though I've set the class's height and width.

You can preview the problem here btw, www.matkalenderen.no Notice the first button, that's a form button and it's using it's own class. At first I tried to use the same class on the css button as well and the same problem appeared, so I tried to separate them into their own classes. In case there was some kind of crash. But it didn't matter anyway.

What am I missing here?

Answer 1

Because <a>'s are inline elements by default. In CSS define a { display:block; } and height and width settings will be applied.

Of course, you may not want to declare all anchor tags as block level elements, so filter by class or id as needed.

Answer 2

An anchor is an inline element, so it doesn't support width and height.

To make it support sizing you have to make it a block element, for example by floating it:

css_button_red { float: left; width: 200px; height: 50px; }

Answer 3

As the others have said, by default <a> is an inline element, and inline elements can't specify a width or height. You can change it to be a block element like this:

a {
    display: block;
}

Though it will then display (unsurprisingly) as a block, sitting on its own, outside the flow of the surrounding text. A better solution is to use display: inline-block which might be a best-of-both-worlds solution depending on your situation.

See PPK's writeup about it.

The real use of this value is when you want to give an inline element a width. In some circumstances some browsers don't allow a width on a real inline element, but if you switch to display: inline-block you are allowed to set a width.

Answer 4

I think the most proper solution is display: inline-block; which will allow you to set height for the element that still will be treated as inline element.