Всеобъемлющее понимание высоты линии и вертикального соглашения

Линейная высота, размер шрифта и вертикальный атрибут являются ключевыми атрибутами для установки макета элементов в линии. Эти три атрибута являются взаимозависимыми отношениями, и изменение расстояния между рядами и установки вертикальных выравниваний требует их совместных усилий. Соответствующее содержание Font-Size было подробно введено в шрифтах CSS. В этой статье в основном будет представлена ​​вертикальная и вертикальная атака.

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

Значение: <Длина> | <процент> | <число> | нормальный | наследовать

Начальное значение: нормальное

Применяется к: все элементы

Наследство: да

Процент: размер шрифта относительно элемента

Чтобы понять высоту линии, вам нужно понять общие термины о высоте линии.

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

Область содержания плюс расстояние между линиями равна линейной встроенной коробке. Если размер шрифта элемента, не связанного с заменой, составляет 15px, а высота линии составляет 21px, то разница-6px. Пользовательский агент делит эти 6 пикселей на два и применяется наполовину к верхней и нижней части области содержания соответственно, что дает линию внутри коробки

Когда высота линии меньше, чем размер шрифта, ящик для линии на самом деле меньше, чем область содержания

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

Внутренний край, внешний край и граница не влияют на высоту линейной рамы, то есть это не влияет на высоту линии.

Граница ограничивающих встроенных элементов контролируется размером с шрифта вместо линии.

Поля не будут применены к верхней и нижней части элементов без повторного обозначения

Левая маржа, левая наполнение, левые границы применяются к началу элемента; Право, правая, правая, правая границы применяется к концу элемента

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

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

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

Значение: базовая линия | sub | супер | Верх Текст-топ | Средний | дно | Текст-дно | <Длина> | <процент> | наследовать

Начальное значение: базовая линия

Применяется к: встроенные элементы, запасные элементы, табличные ячейки

Наследование: нет

Процент: высота линии по сравнению с высокой линии элемента

[Примечание] Процентное значение вертикального склона в Brower IE7 не поддерживает десятичную высоту строки, а эффект отображения отличается от эффекта стандартных браузеров при получении базового, среднего, текстового и т. Д.