How to Set A:Link Height/Width with CSS

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;
}

Set link height to 100% of it's parent

Add:

display: block;
height: 100%;

Though I don't know if you mind the link spanning the width of the <div>

If you do just set the <a> to display: inline-block;

jsFiddle

CSS - Why am I not able to set height and width of a href elements?

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 about it.

The real use of this value is when you want to give an inline element a width. In some circumstances some browsers don't allow a width on a real inline element, but if you switch to display: inline-block you are allowed to set a width.

CSS: width of a link doesn't change by setting the width attribute

Then <a> tag is an inline element. Therefore it's width is determined by the length of the text within the tag. To fix this you can add display:block; to your .media_link class and it will perform as expected.

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

Height equal to dynamic width (CSS fluid layout)

Using jQuery you can achieve this by doing

var cw = $('.child').width();
$('.child').css({'height':cw+'px'});

Check working example at http://jsfiddle.net/n6DAu/1/

---

Related Topics