Между заголовком и основным текстом слишком большой отступ, как его уменьшить?
Уменьшить расстояние между заголовком и идущим за ним текстом.
Решение
К абзацу (тег
) и заголовку (тег ) автоматически добавляется верхний и нижний отступы, которые в сумме дают большое расстояние между заголовком и текстом. Чтобы уменьшить величину отступа надо добавить свойство margin-bottom к селектору H1 . Причём можно установить положительное, нулевое или отрицательное значение. Таким способом легко задавать желаемое значение отступа (пример 1).
Пример 1. Использование отрицательных отступов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Расстояние между строками Апплет
Программа, которая выполняется с составе браузера или под управлением специальной программы для её просмотра. Апплет, как правило, пишется на языке Java, поэтому часто можно встретить сочетание «Java апплет».
Результат примера показан на рис. 1.
Рис. 1. Расстояние между заголовком и основным текстом
В данном примере для селектора H1 устанавливается отрицательное значение нижнего отступа, за счёт этого на 15 пикселов уменьшается расстояние между заголовком и нижележащим абзацем.
Как изменить расстояние между строками текста?
Для управления межстрочным расстоянием (оно еще называется интерлиньяжем) применяется стилевое свойство line-height . В качестве значения обычно указывается число, которое определяет межстрочный интервал. Например, line-height : 2 устанавливает двойной интервал, а line-height : 1.5 — полуторный (пример 1).
Пример 1. Интерлиньяж в тексте
HTML5 CSS 2.1 IE Cr Op Sa Fx
Интерлиньяж p.dline < line-height: 1.5; >P Данный термин переводится как «печенье», но поскольку это название лишь сбивает с толку, его оставляют без перевода. Cookie можно использовать для сохранения даты последнего посещения читателя, паролей, а также любой информации о действиях посетителя на сайте. Подобное применение позволяет персонализировать сайт и сделать его более удобным для посетителей.
Результат данного примера показан на рис. 1.
Рис. 1. Вид текста при разном межстрочном расстоянии
Значение line-height допустимо задавать и в других единицах CSS, например, пикселах (px), процентах (%) и др. В данном примере для первого абзаца установлен полуторный интерлиньяж, а для второго — межстрочное расстояние равно 0.9em .
Межстрочный интервал line-height | CSS
Когда в товарищах согласья нет,
На лад их дело не пойдет,
И выйдет из него не дело, только мука.
Однажды Лебедь, Рак да Щука
Везти с поклажей воз взялись
И вместе трое все в него впряглись;
Из кожи лезут вон, а возу все нет ходу!
Поклажа бы для них казалась и легка:
Да Лебедь рвется в облака,
Рак пятится назад, а Щука тянет в воду.
Кто виноват из них, кто прав — судить не нам;
Да только воз и ныне там.
height = количество_строк * line-height height = 12 * 13px = 156px
Чем отличается line-height от height или padding
padding — это отступ от height до границы элемента.
- height: 0;
- если присутствует текст, то сумма line-height всех строк [см. пример выше с расчётами]
- если есть дочерние элементы, то сумма их height , border , padding и margin
Когда в товарищах согласья нет,
На лад их дело не пойдет,
И выйдет из него не дело, только мука.
Однажды Лебедь, Рак да Щука
Везти с поклажей воз взялись
И вместе трое все в него впряглись;
Из кожи лезут вон, а возу все нет ходу!
Поклажа бы для них казалась и легка:
Да Лебедь рвется в облака,
Рак пятится назад, а Щука тянет в воду.
Кто виноват из них, кто прав — судить не нам;
Да только воз и ныне там.
Расстояние между строк HTML
Междустрочный интервал можно узнать, если из line-height вычесть font-size . Причём значение межстрочного расстояния делится на два. Одна половина увеличивает отступ от буквы до верхнего края, другая — до нижнего. То есть получается, что текст располагается ровно по середине блока.
line-heightpadding
line-height наследуется от предка к потомку
Изменить line-height родителя:
Зелёный потомок
Синий потомок
Зелёный потомокСиний потомок
Значение, заданное потомку, будет главнее того, что задано родителю.
Изменить line-height Зелёного потомка:
Изменить line-height Синего потомка:
Зелёный потомок
Синий потомок
Зелёный потомокСиний потомок
Значение единственное, которое отталкивается от значения font-size элемента, а не от его родителя.
значение line-height в
Случается нередко нам
И труд и мудрость видеть там,
Где стоит только догадаться
За дело просто взяться.
Для line-height родителя: 16px * 2 = 32px Для line-height потомка: 30px * 2 = 60px Для px line-height родителя: 32px Для px line-height потомка: 32px Для em line-height родителя: 16px * 2 = 32px Для em line-height потомка: 16px * 2 = 32px Для % line-height родителя: 16px * 200 / 100 = 32px Для % line-height потомка: 16px * 200 / 100 = 32pxтексттекст
текст
текст
line-height и HTML тег span
Элемент с display: inline; не может иметь height . Поэтому, ежели line-height родителя меньше line-height дочернего элемента, строчный потомок увеличивает высоту строки предка, на которой он находится. Между line-height нескольких строчных элементов, находящихся на одной строке, также выбирается то, что больше.
Изменить line-height родителя:
Изменить line-height строчного потомка:
span
‘line-height’ specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it . The height and depth of the font above and below the baseline are assumed to be metrics that are contained in the font. [w3.org]
Иными словами, если font-size строчного элемента отличается от font-size блочного, то первый может увеличить высоту строки родителя, на которой он находится.
Изменить line-height:
Изменить font-size:
span
Откуда взялся вертикальный отступ у картинки? Как убрать межстрочный интервал?
У блочного элемента нет высоты строки.
Межстрочный интервал в CSS
Давайте теперь научимся задавать межстрочный интервал тексту. Под межстрочным интервалом подразумевается расстояние между линиями текста, то есть белый промежуток между ними. Для этого предназначено свойство line-height , задающее высоту линии текста.
При использовании свойства line-height вас может ожидать некоторый подвох: это свойство не задает промежуток между строками текста, как могло бы показаться, а задает высоту линии текста.
Это значит, что реальный видимый промежуток между строками будет вычисляться так: line-height — font-size = видимое расстояние между строками текста.
В следующем примере расстояние между строками текста будет 50px — 20px = 30px :
Пусть размер шрифта для абзацев равен 30px . Установите свойство line-height так, чтобы видимый белый промежуток между абзацами был равен 15px .