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

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

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

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

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

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

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

Examples related to html

Examples related to css