html - How to set empty span height equal to default line height?

Question

I have a set of <span> elements (each of them is nested to correspondent <div>). They build a stack of panels, like in the picture below.

When span contains some text, it has a normal height. But when it is empty, it's height is 0px. But I need it to have a normal height (to make it look like in the picture).

How to achive this behavior? (I tried to insert a space, but maybe there's a better solution).

question from:https://stackoverflow.com/questions/14217902/how-to-set-empty-span-height-equal-to-default-line-height

Answer 1

Here is a simple and robust solution:

span.item:empty:before {
  content: "200b"; // unicode zero width space character
}

(Update 12/18/2015: rather than using 0a0 non-breaking space, use 200b, which is also a non-breaking space, but with zero width. See my other answer at https://stackoverflow.com/a/29355130/516910)

This CSS selector only selects the spans that are "empty", and injects some content into that empty space, namely a non-breaking space character. So no matter what font size and line-height you have set, everything around that <span> will fall into line, just as if you had text present in that <span>, which is probably what you want.

http://plnkr.co/edit/eXHphA?p=preview

The result looks like this:

---

I see two problems with using min-height:

1. it is vulnerable where font sizes change
2. the text baseline is not in the correct place

Here's what the counter-examples look like when things go wrong:

1. The font size changes, and now you have to hand tune the min-height again. You can't use the same class to support different parts of your website where font sizes are different. Here the font size in this place is 30, but the min-height is still set to 20. So the empty spans are not as tall. :-(

http://plnkr.co/edit/zeEvca?p=preview

2. Your empty span has the correct height with min-height, but it doesn't line up correctly with the text surrounding the span. The baseline falls incorrectly. Look at the line that says "Huh?" below:

http://plnkr.co/edit/GGd7mz?p=preview

Code for this last example:

<div class="group">
  Hello <span class="item">Text</span>
</div>
<div class="group">
  Huh? <span class="item"></span>
</div>
<div class="group">
  Yes! <span class="correct"></span>
</div>

css:

.group {
  background-color: #f1f1f1;
  padding: 5px;
  font-size: 20px;
  margin-bottom: 20px;
}

.item {
  background-color: #d2e3c5;
  border-radius: 6px;
  padding: 10px;
  margin-bottom:5px;
  display: inline-block;
  min-height: 20px;
}

.correct {
  background-color: #d2e3c5;
  border-radius: 6px;
  padding: 10px;
  margin-bottom:5px;
  display: inline-block;
}
.correct:empty:before {
  content: "0a0";
}