Почему высота увеличивается с меньшим размером шрифта?

У меня есть блок с определенной строкой-высотой, где я вставляю содержимое с псевдоэлементом ::before.Почему высота увеличивается с меньшим размером шрифта?

.block::before { 
    content:'text here'; 
}

Это хорошо работает. Однако, если я также предоставил контент меньшего размера шрифта

.block::before { 
    font-size:.6em; 
    content:'text here'; 
}

блок фактически становится выше. Почему это?

JsFiddle. Верхняя строка не имеет изменений размера шрифта, нижняя строка делает.

Теперь я выяснил, что возможным решением является установка line-height псевдоэлемента на 0. Или до 1em. Или даже до normal. Так, что происходит? Установлен ли line-height на какое-то странное значение, установив размер шрифта на .6em? Зачем?

PS Хотя это похоже на дубликат (см. Список справа), ни один из ответов, которые я прочитал до сих пор, не объясняет, почему настройка line-height:normal решает проблему. Должно быть что-то происходит, что непрямо задает высоту строки для большего значения. И это то, что я пытаюсь выяснить.

источник

2014-02-05 Mr Lister

Высота ящиков .lorem, .ipsum, .dolor и .sit - это высота каждой отдельной строки, в которой они содержатся.

Высота каждой строки линии - это максимальная высота над базовой линией + максимальная высота ниже базовой линии стойки линии и текста в строке. поскольку стойка и текст выровнены по базовой линии.

Для ясности, ниже высоты в EM, относятся к размеру шрифта общего контейнера (то есть тело элемента)

В .ipsum, (где размер шрифта 1em) высота над базовой линией является 1em (верхний верхний) + 13/16em (зажим, приблизительный) как для стойки, так и для текста, а высота ниже базовой линии - 1em (половина ведущего) + 3/16em (descender, approx) + 1em (нижняя половина), составляющая в общей сложности 3em.

В .sit (размер шрифта 0.6em) высота над базовой линией - это максимум [1em (верхний полуподвод) + 13/16em (зажим, приблизительный) для стойки] и [ 1.2em (верхняя половина) + 0.6 x 13/16em (зажим, приблизительный) для текста], а высота ниже базовой линии - максимум [1em (нижняя половина) + 3/16em (спусковой крючок, приблизительно) для стойки] и [1.2em (нижняя половина) + 0.6 x 3/16em (descender, approx) для текста].

Оценка этого и преобразование в десятичное значение дает 1,8125em над базовой линией и 1.3125em ниже базовой линии, что составляет в общей сложности 3.125em, что больше, чем 3em of .ipsum.

источник

2014-02-05 09:13:36 Alohci

Да, это объясняет вещи. Мне потребовалось некоторое время, чтобы понять, как работает математика, поэтому мне пришлось сделать несколько снимков, чтобы сделать их более ясными. См. Мой собственный ответ. –

Да, я начал составлять диаграмму, но не хватило времени. В любом случае, вы сделали намного лучшую работу, чем я делал. Я проголосовал за ваш ответ. – Alohci

Привет, пожалуйста, добавьте определенную высоту на вашей коробке ...

.lorem, .ipsum, .dolor, .sit { 
    border:1px solid green; 
    height:30px;/*changes*/ 
}

Fiddle: http://jsfiddle.net/jxf29/

источник

2014-02-05 06:43:58 Krish

Не могли бы вы рассказать о своем ответе и объяснить, почему это работает? – thomaux

Поскольку высота окна работает как макет жидкости без указания определенного значения, поэтому вы даете больше/меньше размера шрифта, тогда высота окна будет меняться. – Krish

Да, но разве вы не ожидали бы снижения высоты окна при уменьшении размера шрифта? – thomaux

Шрифт собственности на .sit: перед тем, как влияет на это свойство содержание CSS следующим образом свойства css текущих элементов очень строгие,

Из-за этого вы можете манипулировать значением свойства содержимого в том же стиле, что и свойство содержимого. создано

например

sit { 
    color: green; 
} 
sit:before{ 
    content: "text-here"; 
    color: red; 
}

это бы подчеркнуть цвет будет красным.

источник

2014-02-05 06:48:57 Wandile

Это не отвечает на вопрос ОФ – thomaux

Редактировать: В последнее время у этого вопроса появилось довольно много новых глазных яблок, так что это обновление, чтобы сделать его более полезным.

Решение Alohci является правильным, но может быть, не совсем понятно, для более наглядно-наклонного.

Так что позвольте мне немного разъяснить решение, с фотографиями.

Во-первых, высота линии наследуется как ее рассчитанный размер, поэтому, хотя она указана в em единицах, дети наследуют значение в пикселях. Например, с размером шрифта 20px и высотой линии 3em высота линии будет 60 пикселей, даже для потомков с разным размером шрифта (если они не укажут собственные высоты линий).

Теперь давайте предположим, что шрифт имеет 1/4 descender. То есть, если у вас есть шрифт 20px, descender составляет 5 пикселей, а 15-пиксельный - 15 пикселей. Оставшаяся длина линии (в данном случае 40 пикселей) затем делится поровну выше и ниже базовой линии, как это.

font 20px with a line height of 60px

Для блока с меньшим шрифтом (0.6em или 12 пикселей), оставшееся количество высоты линии составляет 60-12 или 48 пикселей, который также получает разделен поровну: 24 выше и ниже 24 базовый уровень.

font 0.6em or 12 pixels, also with a line height of 60 pixels

Тогда, если мы объединим два шрифта на одной и той же базовой линии, вы увидите, что высота строки не разделены таким же образом, так что общая высота содержащего блока увеличивается, несмотря на то, как линии высота составляет 60 пикселей.

both fonts

Надеется, что это объясняет вещи!

источник

2014-02-05 11:15:48

Почему высота увеличивается с меньшим размером шрифта?

ответ

Смежные вопросы