Сделать пустой div на одну высоту строки

Ответ 1

Некоторые возможности:

• Установите height (или min-height) к line-height используемое значение.

  Начальное значение line-height равно normal, используемое значение которого зависит от реализации, но spec предлагает число между 1.0 и 1.2

  В моем случае (FF27 для winXP с font-family: "times new roman") это значение 1.25, поэтому вы можете использовать height: 1.25em. Однако это значение может отличаться от других шрифтов или реализаций.

  Затем лучше вручную установить line-height на некоторое значение, например line-height: 1.25em.

  div {
    border: 1px solid red;
    min-height: 1.25em;
    line-height: 1.25;
  }

  <div></div>

Ответ 2

Это зависит от вашего определения высоты одной строки, поскольку нет элемента CSS, который соответствует вычисленной высоте строки элемента.

Если вы знаете точное значение line-height для этого элемента, то вы можете просто указать height на то же значение. Но, учитывая ваш вопрос, это, вероятно, не так.

Существует единица, которая соответствует размеру шрифта em, которую вы можете использовать, если высота одной строки равна вычисленному размеру шрифта:

<div style="width: 100%; height: 1em"></div>

В противном случае вам нужно будет добавить какое-то содержимое наполнителя. Вы можете либо вставить   и сделать с ним:

<div style="width: 100%">&nbsp;</div>

Или немного переиграйте, написав правило CSS с псевдоэлементом, но вы должны как-то настроить таргетинг:

div::before { content: '\00a0'; }

Если элемент может содержать или не иметь контент, но вы хотите, чтобы он имел минимальную высоту,

• используйте min-height, где вы бы использовали height, или

• выберите div:empty::before вместо этого, если вы решите использовать псевдоэлемент, чтобы наполнитель не вставил, если есть контент.

Ответ 3

Еще одно решение:

.your-selector:empty::after {
    content: ".";
    visibility: hidden;
}

Ответ 4

Решение с visibility: hidden; умный Проще установить содержимое на символьное feff Unicode, которое является меткой порядка байтов. Это не имеет ширины, но имеет высоту; он ведет себя одинаково в каждом браузере вплоть до IE6.

.your-selector:empty::before {
    content: '\feff';
}

Я обнаружил, что WebKit (по крайней мере, в Mac OS) применяет слегка различную (1px) высоту строки к жирному тексту, чем обычный текст для некоторых шрифтов. Для обеспечения единообразия (в этом случае мы должны применить даже к непустым селекторам):

.your-selector::before {
    content: '\feff';
    font-weight: 900;
}

Ответ 5

Какую высоту вы хотите сохранить? Будет ли это связано с вашим размером шрифта? Это может быть в em, pt, px или%.

Это просто пример, где 1.5em - произвольное значение:

<div style="width: 100%; height: 5px" ></div>

Если вам нечего писать в этом div, используйте некоторое значение высоты.