Remove white space above and below large text in an inline-block element

html

responsive-design

css

typography

byAlex Kataev·Mar 4, 2025

To trim the white space in inline-block text you can set line-height: 1. Alternatively for more flexibility, use a unitless line-height. Moreover, a great strategy is using a flex container to center text without the excess space as below:

<span style="display: inline-block; line-height: 1;">Trimmed Text</span>
<!-- OR -->
<div style="display: flex; align-items: center; height: 60px;"><span>Flexy Text</span></div>

These two methods bring your text to cover the space just as it needs.

Dialing in the perfect fit

In order to fine-tune your text, adjust both the line-height and height:

span {
  display: inline-block;
  font-size: 50px;
  background-color: green;
  font-family: 'Courier New'; /* Because everyone loves a good typewriter font */
  line-height: 48px; /* Now that's what I call a tight squeeze! */
  height: 50px; /* Height! Stay in line, text! */
  vertical-align: middle; /* Keeps everything nice and centered */
}

With these settings, your text stands to attention like a good little soldier.

Dealing with the eccentricities of fonts

Fonts come with a seemingly infinite number of quirks and peculiarities. For instance, the descenders in 'g' and 'y' can cause extra space below lines. You can control this by messing around with properties like vertical-align:

.vertical-align-example {
  vertical-align: baseline; /* Let's get everything nice and symmetrical! */
}

Super secret techniques for iron-clad control

For the fine control enthusiasts among us:

Use pseudo-elements to apply negative margins and squeeze every last pixel:

.tighter-span::before,
.tighter-span::after {
  content: '';
  margin: -0.1em; /* Like space diet for your text! */
}

Fiddle with letter-spacing for that pixel-perfect alignment. Your text lines will look like they've just returned from the gym!

Tools, resources, and wizardry

Embrace the dark arts of design tools like Adobe Illustrator or Sketch for pixel hunting, and online resources like http://text-crop.eightshapes.com/ for mastering the intricacies of negative margins and typography.

Tackling cross-browser hiccups

We all know the pain of cross-browser inconsistencies when adjusting text spacing. To combat this, take time to test across multiple browsers and consider CSS resets or normalization to iron out those pesky differences.

A standard approach to type set

Even amidst the chaos of different browsers and rendering engines, one can find solace by starting with a CSS reset and then applying specific font rules:

/* CSS reset snippet */
html {
  line-height: 1.15; /* Back to basics! */
}
/* Set font styles */
.custom-text {
  font-family: 'Times New Roman'; /* Every designer's secret love */
  line-height: 48px; /* Keeps text snug and warm */
  height: 50px; /* Holds everything in place */
}