Float:Left Menu

The most common horizontal menu where list items are floated to the left.

li is float:left.
li is display:block.
line-height is unitless 1.46, which ends up computed to 20px (with 14px font-size).
No explicit height is set on any part of the menu.
Computed height of li is 20px. Changing the line-height or font-size would affect the computed height.

For illustration, contrast this alternate example where the line-height has been explicitly set to 40px (on the container and allowed to inherit).

For illustration, contrast this alternate example where the font-size has been explicitly set to 28px (on the container and allowed to inherit). You can also see how the change in font-size affects the computed margin, because margin has been specified in relative units.

Display:Inline-Block Menu

An alternative horizontal menu where the list items are given a display type of inline-block. This one is centered, which is the usual reason for using this variant (the control of blocks with the ability to center).

li is display:inline-block.
line-height is unitless 1.46, which ends up computed to 20px (with 14px font-size).
No explicit height is set on any part of the menu.
Computed height of li is 20px. Changing the line-height or font-size would affect the computed height.
You can also see the issue where white space is preserved by display:inline-block, causing the extra pink to show above and between the menu items.

For illustration, contrast this alternate example where the line-height has been explicitly set to 40px (on the container and allowed to inherit).

For illustration, contrast this alternate example where the font-size has been explicitly set to 28px (on the container and allowed to inherit). You can also see how the change in font-size affects the computed margin, because margin has been specified in relative units.

Display:Inline Menu

A less common style of menu (sometimes used in supplementary navigation) where list items are displayed inline. This is likely the issue as observed here.

li is display:inline.
line-height is unitless 1.46, which ends up computed to 20px (with 14px font-size).
Because it's display:inline, setting height on li will not have any effect.
Displayed height of li is 16px. Changing the line-height or font-size would affect the displayed height.
You can also see the issue where white space is preserved by display:inline, causing the extra pink to show above the menu items and extra purple between the menu items.

For illustration, contrast this alternate example where the line-height has been explicitly set to 40px (on the container and allowed to inherit). This is likely the issue as observed here.

For illustration, contrast this alternate example where the font-size has been explicitly set to 28px (on the container and allowed to inherit). You can also see how the change in font-size affects the computed margin, because margin has been specified in relative units. This is likely the issue as observed here.

Recommended Menu

The purpose here was to show how font-size and line-height can and do affect the height of horizontal menus. It depends on the technique used for the menu and then on whether the a (link) inside has been set to block. Assuming a known, inherited line-height and a desire to not set a hard width or height and no desire to center the menu items, here's a possibility.