Minimum height for div or span with empty element

Question

When I enclose within span or div a string that happens to be an empty string or includes only white spaces, that part does not have any height, and when that span or div is further embedded into something like a table, that cell does not have enough height, and looks wrong. How can I ensure that a span or div takes up at least the height of when the string has other characters? This is something like doing \strut in TeX. I can either insert something into the string, or adjust the css.

I tried, putting the following into the relavant css class, but the problem is that I have to manually adjust the string height (I am not sure if it is "1em". Probably not). What is the right way to do this?

min-height : 1em;

Answer 1

Your span element needs to become a block element if you want to set its height. So set the style display: block or display: inline-block as appropriate.

span.item {
  display: inline-block;
}

To set the height of an empty span, I've found it best to simply inject a   rather than set a min-height. (UPDATE: per @sawa, rather than using a non-breaking space character, perhaps a more suitable character would take up no space, i.e. the unicode ZERO WIDTH SPACE character, \200b.)

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

This will work for whatever the font size may be, and it avoids problems with the baseline not lining up with adjacent text. Look at the line that says "Huh?" below:

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

(See similar question: https://stackoverflow.com/a/29354766/516910)

Answer 2

Your code isn't right: you don’t need enclosing quotes ("") around values in CSS.

Either use:

min-height: 1em; /* I am not sure if one can use em with height properties */

Or use:

min-height: 12px;