Почему высота линии пролета бесполезна?

во-первых, давайте посмотрим фрагмент кода:

http://jsfiddle.net/rFGkV/

почему span ' s line-height не используется?

The line-height по-прежнему 200px, но когда мы ставим span ' s display свойство inline-block на line-height на - Это?

см. ниже:

http://jsfiddle.net/B7z85/

2 52
css

2 ответа:

блочные макеты, например div по умолчанию, состоят из вертикальной стопки линия коробки, которые никогда не имеют пространства между ними и никогда не перекрываются. Каждая строка поля начинается с стойки который является воображаемым встроенным полем высота линии-высота, указанная для блока. Затем линейный блок продолжается со встроенными полями разметки в соответствии с их высотой линии.

на диаграмме ниже показан макет для вашего первого примера. Заметить что поскольку высота шрифта в 1,7 раза меньше высоты стойки, высота строки определяется высотой стойки, так как поле строки должно полностью содержать свои встроенные поля. Если бы вы установили высоту линии на span чтобы быть больше, чем 200px, линейные поля будут выше, и вы увидите, что текст будет двигаться дальше друг от друга.

Layout with span as inline

когда вы делаете span inline-block, связь между div и span не изменение, но span получает свою собственную структуру компоновки блоков с собственным стеком линейных блоков. Таким образом, текст и разрывы строк выложены внутри этого внутреннего стека. Стойка внутреннего блока в 1,7 раза превышает высоту шрифта, т. е. то же самое, что и текст, и макет теперь выглядит так, как показано ниже, поэтому текстовые строки расположены ближе друг к другу, отражая настройку высоты строки span.

(обратите внимание, что две диаграммы находятся на разных весы.)

Layout with span as inline-block

88

это дизайн. В документе HTML есть два типа элементов: блок и встроенный. Встроенные элементы не прерывают поток документа, но блочные элементы делают это.

элементы блока, как следует из названия, блокируют область на странице, которая содержит некоторый контент. Некоторые примеры блочных элементов:<p> и <div>. Вы можете применить height, line-height и другие свойства CSS к этим элементам, чтобы изменить размер блока, а затем, поток документа.

встроенные элементы занимают минимальное пространство, необходимое для их визуализации, что означает, что установка ширины и высоты на этих элементах не будет иметь никакого эффекта. Как вы уже видели, вы можете сказать браузеру, чтобы он рассматривал встроенный элемент как элемент блока, чтобы вы могли применять к ним высоты.

пример этого можно увидеть при использовании <li> элементы для создания меню. <li> s-это блочные элементы. Если вы создадите список, элементы будут отображение по вертикали на странице, гарантируя, что каждый элемент списка отображается ниже предыдущего. Однако, если вы применяете display: inline; к элементам списка, они теперь будут отображаться горизонтально.

19