Using line-height property with menus

Tutorials Shared by the Internet Community


  Top Tutorials     New Tutorials     Submit     Login     Register  

Using line-height property with menus

An article telling how to apply line-height to get pixel precise menus
  • Total Hits: 16012

  • Average Rating :
    URL RatingURL RatingURL RatingURL RatingURL Rating


  • Total Votes: 149 votes

  • Category: CSS/Basic

  • Submitted on: 2008-03-07 08:25:41

  • Submitted By: Devesh Khanna

  • Set as Favorite


Line-height is a property can help us solve menu problems really elegantly. While often we have to battle with paddings, box model, cross browser compliance, using line-height in combination with some other properties can reduce the need for additional markup and additional css definitions.

Of course there are cases where this usage that I am about to demonstrate can't be applied, but having this trick under your sleeve can be a good thing when you encounter a perfect situation.    More detail...

Rating Detail

 Stars  Percentage  Total Vote
 One star  Vote LeftVote MiddleVote Right 37.58%  56
 Two starsTwo star  Vote LeftVote MiddleVote Right 10.74%  16
 Three starsThree starsThree stars  Vote LeftVote MiddleVote Right 12.08%  18
 Four starsFour starsFour starsFour stars  Vote LeftVote MiddleVote Right 11.41%  17
 Five starsFive starsFive starsFive starsFive stars  Vote LeftVote MiddleVote Right 28.19%  42

Caste Your Vote

 Rating  Selection  Guidelines
 Poor:     Very disappointing, useless.
 Fair:     Below average, disappointing but not useless.
 Good:     About average in its class.
 Very Good:     Above average for its category.
 Excellent:     One of the best Tutorials in its category.