如何使用line-height且不增大span尺寸？Codecademy头部按钮问题求助

Hey there! Let's break down what's going on with your "Upgrade to Pro" button and fix that annoying border/height issue for your Codecademy navbar clone.

The Root of the Problem #

When you set line-height: 50px directly on your <span> (an inline element), it doesn't just center the text—it makes the entire vertical footprint of the span equal to that 50px value. Adding a border then wraps around that full 50px height, which is why it's stretching to match the header's height instead of fitting tightly around the text.

Fixes to Try (No More Stretched Borders!) #

Here are a couple of clean solutions to keep your text centered without bloating the span's size:

Solution 1: Use Flexbox for Centering (Most Reliable)

Ditch the line-height hack entirely and lean into flexbox—it’s made for this kind of alignment.

First, set your header to act as a flex container to vertically center all its children:

header {
  height: 50px;
  display: flex;
  align-items: center; /* Centers everything vertically */
  /* Add your other navbar styles here */
}

Then style your button span to wrap the text tightly with padding and border:

a span {
  border: 2px solid #your-pro-color; /* Your desired border style */
  padding: 6px 18px; /* Adjust to control button size */
  line-height: 1; /* Resets line-height to normal for text */
  /* Optional: Add rounded corners, hover effects, etc. */
  border-radius: 4px;
}

This way, the button stays perfectly centered in the header, and the border only wraps around the padded text area—not the full 50px header height.

Solution 2: Adjust Line Height + Inline-Block Trick

If you want to stick with line-height for text alignment, tweak how you apply it:

header {
  height: 50px;
}

a {
  /* Make the anchor tag an inline-block so it can be aligned */
  display: inline-block;
  vertical-align: middle; /* Centers the button in the header */
}

a span {
  border: 2px solid #your-pro-color;
  line-height: 1.2; /* Set line-height to fit the text, not the header */
  padding: 8px 16px; /* Use padding to control button height */
  display: inline-block;
}

By setting vertical-align: middle on the anchor, you ensure the button sits centered in the header, while the span's line-height only affects the text itself. The padding gives the button its size, and the border wraps neatly around that padded area.

Quick Note #

Avoid setting line-height on inline elements like <span> to match parent container heights—it almost always leads to unexpected vertical sizing issues. Flexbox or inline-block + vertical alignment are far more predictable for these cases.

内容的提问来源于stack exchange，提问作者J. Doe