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

User · Answer

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.

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

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

Examples related to html

Examples related to css