Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника
line-height

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

Для строчных элементов, за исключением строчных заменяемых элементов, данное свойство устанавливает высоту элемента. Для строчных заменяемых элементов высота задаётся с помощью свойства height.

Примеры использования свойства line-height, которые являются равнозначными друг другу:

  1.DIV { line-height: 1.2; font-size: 10pt }
  2.DIV { line-height: 1.2em; font-size: 10pt }
  3.DIV { line-height: 120%; font-size: 10pt }
  4.
Если элемент содержит несколько элементов с разными размерами шрифта, свойство line-height будет основываться исходя из размеров самого большого шрифта.

Свойства line-height и междустрочный интервал (интерлиньяж)

Высота строчных блоков определяется с помощью свойства line-height. Так же с помощью свойства line-height создаётся междустрочный интервал (интерлиньяж). Механизм создания междустрочного интервала (интерлиньяж) следующий, например, при установке шрифта равного 12pt и свойстве line-height равного 14pt, будет создано дополнительное пространство сверху и снизу символов по 1pt(14pt-12pt/2).

Если свойство line-height меньше свойства font-size, то высота строчного блока будет меньше высоты шрифта, в результате чего произойдет наложение строк друг на друга.

  1.<!DOCTYPE html>
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Наложение рамки на смежные строчные блоки</TITLE>
  5.<STYLE type="text/css">
  6.span {
  7.height:200px;
  8.width:300px;
  9.background:#ccc;
10.line-height:3pt;
11.font-size:12pt;
12.border:7px solid #cad;
13.}
14.
15.</STYLE>
16. </HEAD>
17. <BODY id="body">
18.
19.<DIV id="div1">
20.<span>
21.Самое спокойное место,
22.где может спрятаться женщина — это ее сердце.
23.Неизвестный автор.
24. </span>
25. </DIV>
26. </BODY>
27.</HTML>
Наложение рамки на смежные строчные блоки
Наложение рамки на смежные строчные блоки
Следует помнить, что рамки, создаваемые свойством border, отступы, создаваемые свойством padding и margin, не входят в значение высоты строчного блока. В случае, если высота строчного блока меньше высоты указанных свойств может сложиться ситуация, когда рамка будет накладываться на смежные строчные блоки.


Доступ и установка с jQuery

  • Получить свойство lineHeight: val = $("div").css("lineHeight");
  • Установить свойство lineHeight: $("div").css({"lineHeight":"..."});
  • Установить свойство lineHeight: $("div").css("lineHeight","...");
  • Как использовать популярный jQuery для свойств CSS, - читайте статью "jQuery для начинающих".
Александр Ермаков. Хостинг - www.pwstudio.org