CSS: How to add width and height attributes to anchor tag

You might face this problem sometimes: You want to add width and height to an anchor instead of giving these attributes to its container. Surprisingly, width and height attribute are not works. For example, consider the following codes:

a.ansok {
    background-image: url(../images/layout/button.png);

And here is what you will get (instead of beautiful buttons):

So, what is the reason and how to fix it?

Well, anchor tags are not block level HTML elements but rather inline elements. So what is the difference between the two? Here is the definition of the two items:

Inline Element definition:

Block Element:

So, all you have to do is just add display:block to CSS class of anchor. And here is the result:

Some useful links:

HTML inline elements

HTML Block Elements