CSS - Neden <a href> elements?

Question

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

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 yükseklik ve genişliğini ayarlayamıyorum.

Bu değerin gerçek kullanımı, bir satır içi elemanın genişliğini vermek istediğiniz zamandır. Bazı durumlarda, bazı tarayıcılar gerçek bir satır içi eleman üzerinde genişliğe izin vermez, ancak görüntülemeye geçiş yaparsanız: satır içi bloğu bir genişlik ayarlamaya izin verilir.

Answer 2

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 3

, en doğru çözüm hala inline unsur olarak ele alınacaktır element için height ayarlamasına olanak tanıyacak display: inline-block; olduğunu düşünüyorum.