Минимальная высота для div или span с пустым элементом

Question

Когда я заключаю в span или div строку, которая оказывается пустой строкой или содержит только пробелы, эта часть не имеет высоты, и когда эти span или div дополнительно внедряются в нечто вроде table, эта ячейка не имеет достаточной высоты и выглядит неправильно. Как я могу убедиться, что span или div занимают хотя бы высоту, когда в строке есть другие символы? Это что-то вроде \strut в TeX. Я могу либо вставить что-то в строку, либо настроить CSS.

Я пытался поместить следующее в релевантный класс css, но проблема в том, что я должен вручную отрегулировать высоту строки (я не уверен, что это «1em». Вероятно, нет). Как правильно это сделать?

минимальная высота: 1em;

Answer 1

Ваш элемент span должен стать элементом блока, если вы хотите установить его высоту.Поэтому установите стиль display: block или display: inline-block в зависимости от ситуации.

span.item {
  display: inline-block;
}

Чтобы установить высоту пустого промежутка, я считаю лучшим просто ввести * 1009.* вместо установки минимальной высоты.( UPDATE : вместо @sawa вместо использования символа без пробелов, возможно, более подходящий символ будет занимать no пробел, т.е. символ Unicode ZERO WIDTH SPACE, \200b.)

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

Это будет работать при любом размере шрифта и позволит избежать проблем с выравниванием базовой линии со смежным текстом.Посмотрите на строку с надписью "А?"ниже:

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

(см. аналогичный вопрос: https://stackoverflow.com/a/29354766/516910)

Answer 2

Ваш код неверен: вам не нужно заключать в кавычки ("") значения в CSS.

Либо использовать:

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

Или используйте:

min-height: 12px;