Вопрос по html, css – Почему линейная высота пролета бесполезна?

53

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

div { width:200px; height:200px; border:1px solid black; line-height:200px; }
span { line-height:1.7;  }
<div><span>123<br>456<br>789<br>000</span></div>

Почемуspan& APOS; sline-height неиспользованный?

line-height все еще200px, но когда мы устанавливаемspan& APOS; sdisplay собственность наinline-block,line-height изspan используется?

Увидеть ниже:

div { width:200px; height:200px; border:1px solid black; line-height:200px; }
span { display:inline-block; line-height:1.7; }
<div><span>123<br>456<br>789<br>000</span>

Ваш Ответ

2   ответа
90

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

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

Layout with span as inline

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

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

Layout with span as inline-block

Извините за ошибку, она применяется во всех случаях
Я понимаю, что эти два изображения имеют разные масштабы, но второе изображение все еще показывает неправильные пропорции внутри себя. Внутренние линии коробки слишком велики. Они должны быть (как написано в тексте на диаграмме) только в 1,7 раза больше размера шрифта. Подобно тому, как это показано на первом изображении.
@Pilot - распорки - это зеленые ящики.Strut in CSS 2.1 spec
Единственное, что я должен добавить, это то, что если у вас есть элемент, которыйinline, вы можете изменитьline-height до тех пор, пока он больше, чем размер текста и / или изображения в нем, и меньше, чем содержащий блок (некоторые из них, например,<p>изменить размер автоматически, чтобыline-height может идти до бесконечности). Если вы хотите сделатьline-height больше, чем содержащий блок, вы должны изменить размер содержащего блока. Если вы хотите сделать его меньше, чем текст и / или изображение, вам нужно использоватьinline-bolck.
19

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

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

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

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

Хорошая информация, спасибо!
@ SKing7 Да, любой учебник CSS или дажеW3C Specification& # X2026;
спасибо, но есть ли какие-нибудь документы об этом? SKing7

Похожие вопросы