width for <a> tag in html

Question

Is it possible to set some width to the <a> tag in html ? If yes what is the way, if no is there any work around ??

Answer 1

You can redefine it as a block element and then set width to it: a{display:block;width:400px}.

EDIT: However, in this case it will start on a new line and the next piece of text will also be in a new line. What solves the problem, is inline-block display mode, but this again has problems with older versions of IE and FF (see here: http://www.quirksmode.org/css/display.html)

Answer 2

The css width property does not affect inline elements such as <a> or <span>. In order to use block-level properties like width, you'll have to declare your element as a block-level element, using display:block:

<a style="display:block;width:200px">Your link</a>

Answer 3

As others said, the a element is an inline element and as such not interested in widths or heights. It only looks for the content and makes itself as big as the content requires it to be.

However, depending on what you try to make it look, you can use padding and margin to change the distance to other in-line elements. For example <a style="padding: 0 5px;">some text</a> adds a 5px padding to the left and the right of the text. But again, the actual size will be based on the text size.

A different approach, which is more a hack, and as such should be avoided if possible, would be the following:

<a style="background: red; padding-right: 100px;">
    <span style="position: absolute;">Some text</span>
</a>

This adds a padding of 100px to the right of the text, but by setting the text's position to absolute, that text renders "above" the rest and is ignored for all additional size calculations, so the a element basically has no direct content and as such a width of zero with an added padding of 100px to the right. So the element is exactly 100px wide. And by not modifying the span's positions after setting it to absolute, it will stay where it would have been without the absolute, so it looks the same.