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

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