Setting a Width and Height on an a Tag

Setting a width and height on an A tag

You need to make your anchor display: block or display: inline-block; and then it will accept the width and height values.

How to assign height and width to anchor tag link

Add display: inline-block; in the css.

<div class="tag">
 <a href="#">Book Form</a>
</div>

in css

.tag a 
  { 
  display: inline-block;      
  background-color:#899898;
  height:125px;
  width:250px;
  color:#000;
  font-family:Arial;
  font-size:25px;
  }

---

Anchor (<a>) are inline elements. (here is a complete list of elements that are inline by default). Inline elements can't have width and height. So if you want inline elements to maintain it's native property, i.e. be in the normal flow of line, and still have width, height and vertical-align properties.. then inline-block is the property you should be using.

Relevant Links

• https://developer.mozilla.org/en-US/docs/CSS/display
*

Edit: added explanation

Why anchor tag does not take height and width of its containing element

The CSS 2.1 spec says

The dimensions of the content area of a box — the content width and
content height — depend on several factors: whether the element
generating the box has the 'width' or 'height' property set, whether
the box contains text or other boxes, whether the box is a table, etc.
Box widths and heights are discussed in the chapter on visual
formatting model details.

The <a> element defaults to a display value of inline. Its contents participate in the layout so it is a non-replaced element.

For height, the spec says:

10.6.1 Inline, non-replaced elements

The 'height' property does not apply. The height of the content area
should be based on the font, but this specification does not specify
how.

So 18px is arrived at from a single line of text, taken from the font metrics. Neither the larger image content, nor the containing block size plays any part.

For width, the spec says

10.3.1 Inline, non-replaced elements

The 'width' property does not apply. A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.

in other words, the width is determined by the <a> element's contents, paddings, borders and margins.

For the first <a> element that's 114px (contents - image plus one space) + 20px (left margin) + 2x5px (left and right border) = 144px

For the second <a> element that's 280px (contents - image) + 20px (left margin) + 2x5px (left and right border) = 310px

Just need to account for the spaces. The elements are being laid out in a line box in a inline context, so the spaces at the start of the first <a> element and at the end of the second <a> element are being dropped. The spaces at the end of the first <a> element and the start of the second <a> element are being collapsed into one space. When spaces are collapsed, it's always the first space which remains, which in this case is the one at the end of first <a> element, so that's why a space participates in the width of the first <a> element but not in the width of the second one.

css for a tag to increase width and height?

Try making it a block element:

#aTag { 
    display: inline-block; 
    width: 100px;
    height: 100px;
    background-color: red;
}

Width and Height not working on 'a' tags?

<a href="#" style="width:240px; height:40px;background-color:blue;display:block;"></a>

It is because an 'a' element is usually displayed inline. You can over-ride it by using display:block;

More on 'display' here: http://www.w3schools.com/cssref/pr_class_display.asp

Regarding float:left;

When floating left, the browser automatically over-rides the display to be a block.

How to set a:link height/width with css?

add display: block;

a-tag is an inline element so your height and width are ignored.

#header div#snav div a{
    display:block;
    width:150px;
    height:77px;
}

How can I set the width/height of td tag in which image is included?

try this.

display:block;
width:100%;
height:auto;

width for a tag in html

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://caniuse.com/#search=inline-block)

---

Related Topics