How to set height property for SPAN

Playing nicely with browser compatibility

If you're thinking about your users who still surf the web on IE6/7, you could add a fallback using the star hack or a combination of zoom and display:

span {
  display: inline-block; 
  *display: inline; 
  zoom: 1; /* "Trust me, I'm an engineer!" almost spelled right! For IE6/7 */
}


For simpler height-tasks, think about using line-height for single line content or padding to create an illusion of more space within a span.

Pro tips for handling edge cases

At times, display: inline-block may not cut it. Here are some alternatives:

Exploring the world of flex layout

Consider using flexbox for controlling the height of span when nested within a flex container:

.flex-container {
  display: flex; /* "I've got the power!"🎵 */
  align-items: stretch; /* Look ma, full height! */
}

.flex-container span {
  flex: 1; /* Like Oprah Winfrey saying "You get a flex! And you get a flex! Everyone gets a flex!" */
}


Poking around CSS grid layout

When span elements find themselves in a CSS Grid, we get some super-precise alignment tools:

.grid-container {
  display: grid; /* Making neat shapes since 2017 */
}

.grid-container span {
  grid-area: 1 / 1 / 2 / 3; /* No, this is not the Konami code */
}


Grid's two-dimensional layout capabilities make it an attractive solution.

Ensuring older browsers understand our code

Modifying display to block might confuse those reading your code. span elements are designed for inline use and should be used accordingly. If you need a block element, consider using a div.

Accessible design for all

Modifying display, height, and line-height can affect the readability of your text for all users. So, wrestle with your stylesheets and consider testing on various devices!