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.
Overview
Let's repeat what line-height is. Line-height property sets the distance between the lines and of course aligns text in the vertical middle of that line.
It can take values "normal", "inherit", length, numeric and percentage value.
p{
line-height:normal;
}
// numeric
// sets a line height of a number multiplied by current font size
p{
line-height:1;
}
// length
// set fixed line height
p{
line-height:10px;
}
// percentage
// sets a line height in percentages of current font size
p{
line-height:100%;
}
Usage
Being a designer most interesting value that line-height can take is using lengths (fixed heights).
I never use it when defining line height of entire document or any paragraph of text, but I use it when dealing with i.e. single links or menu items. Why? It gives me a chance to be a pixel precise and I like that kind of control a lot! Those of you who wants to keep things fluid and flexible might disagree with me on this, but i.e. if you want your vertical menu on the left to be exactly the same height as your header background image on the right, then you need pixel precision.
Menu with line-height
A really good choice for menus, something that most of use is using unordered list. It gives you 3 elements in hierarchy to work with, plus it structurally and visually separates links, so from accessibility point of view it's all good. Oh yes, semantics. We got that covered too because list if links is - a list :)
So our menu's source looks like this
<ul> <li class="first"><a href="#">Homepage</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact us</a></li> </ul>
and for this example that would be all the markup we need... No need for additional spans or anything.
Vertical menu
In this example I will use menu next to an background image. Image has a fixed height of 214px and the goal is to get the menu to be the same height as well. That makes five menu items with 24px in height plus 1px top margins except for the first one (42px x 5) + (1px x 4) = 214 px.
Unstyled, our markup looks like this.
When we add some styling to it, just to cover the basics. I'll also add a fixed height background image.
ul#nav, ul#nav li{
margin:0;
padding:0;
list-style:none;
}
ul#nav{
background:url(bg.jpg) no-repeat 100% 0;
height:214px;
}
ul#nav li{
width:190px;
margin-top:1px;
}
ul#nav li.first{
margin:0;
}
ul#nav li a{
display:block;
width:100%;
}
it looks like this
Adding some colors, background images to menu items
ul#nav li a{
display:block;
width:100%;
color:#0e85b0;
background:#bae2f0;
}
will turn our menu into this
Now, here comes the moment we waited for. What we're aiming at is to set a clickable "button" of a certain height and width with properly aligned text in it. By setting a line height to desired value we get what we want. We'll also use text-indent property to give the text a left offset.
With line-height property we force the menu item to be of a certain (fixed) height and with text-indent we move the text to the left. No paddings to mess with your dimensions.
The css looks like this
ul#nav li a{
display:block;
width:100%;
color:#0e85b0;
background:#bae2f0 url(arrow1.gif) no-repeat 10px 50%;
line-height:42px;
text-indent:25px;
}
and the result
Pretty simple, isn't it?
Downsides
As I mentioned at the beginning of this article there are a lot of cases that you can't use this approach. In order for this to work as it should, you need your menu items to be one liners. As soon as the text goes into new line the things will not look good. Menu items will be to large and text-indent property works on first line only. I sometimes avoid that to happen with adding this:
white-space:nowrap; overflow:hidden;
because I'd sometimes rather risk loosing couple of last letters then having things break up... That's my designer side speaking :)
Designer, developer and a passionate standardista with large experience in all types of front-end work. Started to get involved with web in 1999. and turned freelance in 2005., the same year he started Css Globe. Alen's work has been featured on numerous css galleries including famous Css Zen Garden official list. Available for 
PENIX on 29 Jan, 2008 wrote:
Jordan Arentsen on 29 Jan, 2008 wrote:
Jermayn Parker on 30 Jan, 2008 wrote:
cssglobe on 30 Jan, 2008 wrote:
@Jermayn: I mentioned the risks of having things overflow the box and this trick don't work in those cases. When I work with this I usually increase the font size to a certain level as a test. If it holds I go with it...
Jermayn Parker on 31 Jan, 2008 wrote:
It is however easier than fiddling around with paddings etc which is a pain!
An Jay on 31 Jan, 2008 wrote:
Tom on 1 Feb, 2008 wrote:
if you do menus like this with line height your asking for trouble.
cssglobe on 1 Feb, 2008 wrote:
You can take this example, put it in your "library" and use it if you wish, that's it. I never said that this is the best possible solution.
Emre Sumer on 2 Feb, 2008 wrote:
I'll use line-height in my upcoming works..
Thanks...
Kodowanie stron XHTML CSS on 2 Feb, 2008 wrote:
Sangesh on 4 Feb, 2008 wrote:
:) loved this. You guys do things very good.
Thanks a lot.
Jordan on 5 Feb, 2008 wrote:
frank on 12 Feb, 2008 wrote:
very usefully
chrmou on 11 Mar, 2008 wrote:
as i'm a newbee, i can't make it work. Could you be more specific please?
Thanks a lot
Analogue on 14 Mar, 2008 wrote:
Keep it up man, there's some useful info on cssglobe.
Dogman on 10 Apr, 2008 wrote:
Nikidon on 11 Jun, 2008 wrote:
Niklaus Krevedkos on 11 Jun, 2008 wrote:
Thanks!
Andy Andreef on 14 Jun, 2008 wrote: