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

Question

I just can't set the height and width of a elements of my navigation.

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

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


#header div#snav div a:hover{
    height:77px;
    background:#eff1de;
}

Any ideas what I am doing wrong?

score 208 · Accepted Answer · answered May 13 '11 at 09:59

208

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

answered May 13 '11 at 09:59

Stijn Janssen

2,229
1
14
6

24

Block has the side effect that it will create a new line after the element. – Cobra_Fast May 13 '11 at 10:01

score 30 · Answer 2 · answered May 13 '11 at 10:00

30

Anchors will need to be a different display type than their default to take a height. display:inline-block; or display:block;.

Also check on line-height which might be interesting with this.

answered May 13 '11 at 10:00

Cobra_Fast

15,671
8
57
102

4

line-height is also a great solution. But when the text in the link will go over 2 lines the whitespace between those 2 line is huge. – Stijn Janssen May 13 '11 at 10:04

score 7 · Answer 3 · answered May 13 '11 at 09:59

7

Your problem is probably that a elements are display: inline by nature. You can't set the width and height of inline elements.

You would have to set display: block on the a, but that will bring other problems because the links start behaving like block elements. The most common cure to that is giving them float: left so they line up side by side anyway.

answered May 13 '11 at 09:59

Pekka

442,112
142
972
1,088

1

Floating them will probably prevent their parent element from expanding around them. – Cobra_Fast May 13 '11 at 10:03
@Cobra yup, but that is easily fixed. [In 2011, is there any need for clearfix?](http://stackoverflow.com/q/5565668) – Pekka May 13 '11 at 10:24
1

So we need to fix the fix here? That doesnt sound very well. – Cobra_Fast May 13 '11 at 10:28

score 5 · Answer 4 · answered Apr 05 '14 at 04:24

Thanks to RandomUs 1r for this observation:

changing it to display:inline-block; solves that issue. – RandomUs1r May 14 '13 at 21:59

I tried it myself for a top navigation menu bar, as follows:

First style the "li" element as follows:

display: inline-block;
width: 7em;
text-align: center;

Then style the "a"> element as follows:

width: 100%;

Now the navigation links are all equal width with text centered in each link.

score 5 · Answer 5 · answered May 13 '11 at 10:00

From the definition of height:

Applies to: all elements but non-replaced inline elements, table columns, and column groups

An a element is, by default an inline element (and it is non-replaced).

You need to change the display (directly with the display property or indirectly, e.g. with float).

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

5 Answers5

Linked

Related