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

Sat, Sep 17, 2011

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 {
    width:86px;
    height:41px;
    line-height:41px;
    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:

• Inline elements typically may only contain text and other inline elements. When rendered visually, inline elements do not usually begin on a new line.

Block Element:

• Block-level elements typically contain inline elements and other block-level elements. When rendered visually, block-level elements usually begin on a new line.

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