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

Question

I have a set of elements (each of them is nested to correspondent

). They build a stack of panels, like in the picture below.

相关标签:

Answer 1

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

Answer 2

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:

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: "\00a0";
}

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;
}