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

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).

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 \00a0 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:
it is vulnerable where font sizes change
the text baseline is not in the correct place
Here's what the counter-examples look like when things go wrong:
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
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: "\00a0";
}

Answer 2

You could set span display:inline-block; and then add min-height

Answer 3

From the picture, it seems that you have already set display: block on the span elements. If not, add that. Alternatively, consider using div instead. The difference between the two elements is that span is inline by default, div is block by default, so why not use the latter?
Then you need to set min-height to a value that equals the height of items that have content. This is normally determined by their line height. The default line height varies by font (and by browser), so to get consistent results, set the line height explicitly, e.g.
* { line-height: 1.25; }
span { min-height: 1.25em; }

Answer 4

Maybe this will work -
span{
min-height:16px;
}