Line-Height vs Padding

HTML & CSS
1

In the code below, can’t I just make the Line-Height larger to increase the height of my Tabs instead of using Padding?


#nav li a {		/* Added LI for clarity */
	float: left;
	width: 140px;
	padding: 9px 0;		/* Center text vertically.
					Padding + Line-Height + Padding = Dropline Height
					9px + 16px + 9px = 34px */
	font: bold 14px/16px arial, helvetica, sans-serif;
					/* Why not make Line-Height 34px and eliminate Padding? */[/B]
	color: #4682B4;		/* Steel Blue (darker) */
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
}

Debbie

2

/* Why not make Line-Height 34px and eliminate Padding? */

  1. If the text should happen to wrap a line-height that is in relation to the font-size will keep the vertical spacing between text (the line-height) legible.

  2. top/bottom padding plus normal line height keeps you from having to set a fixed height. In turn that keeps your text at v-center at all times when someone like me comes along and uses “zoom text only”.

When I don’t have to set a fixed height I use padding and normal line-height to create an initial calculated height that can expand with font-size changes.

Take this menu for example, reduce your browser window and force the text to wrap down to another line.
If it would of had a huge line-height then it would show up between the wrapping text.

3

Okay, so for lines that wrap your way is better. But for my tabs which won’t wrap, it sounds like I could do what I proposed?

Thanks,

Debbie