Вторник, 12 Июня 2012 13:58

Свойство line-height - высота строки в CSS

Written by 
Оцени эту запись
(2 Голоса)

Свойство line-height задает межстрочный интервал элемента. Используется как для стилизации текстового блока, так и для вертикального выравнивания внутри блочных элементов.

 

Свойство line-height может принимать значние normal, а также задаваться в пикселях, em'ах.

 

Рассмотрим примеры:

 

<div style="line-height: normal;">Бывает так, что видишь сайт и становится интересно на чем он написан. Не для каждого сайта можно это определить, так как по прежнему считается модным в среде веб-студий писать свои движки. Не навязываю свое мнение, но даже десяток (а обычно их гораздо менбше) разработчиков, сидящих в одном офисе не могут сделать кору сайта лучше, чем разработчики популярных движков, которыми пользуются, а значит постоянно тестируют, многие-многие люди. Но я не об этом.</div>

 

 
Бывает так, что видишь сайт и становится интересно на чем он написан. Не для каждого сайта можно это определить, так как по прежнему считается модным в среде веб-студий писать свои движки. Не навязываю свое мнение, но даже десяток (а обычно их гораздо менбше) разработчиков, сидящих в одном офисе не могут сделать кору сайта лучше, чем разработчики популярных движков, которыми пользуются, а значит постоянно тестируют, многие-многие люди. Но я не об этом.

 

<div style="line-height: 10px;">Бывает так, что видишь сайт и становится интересно на чем он написан. Не для каждого сайта можно это определить, так как по прежнему считается модным в среде веб-студий писать свои движки. Не навязываю свое мнение, но даже десяток (а обычно их гораздо менбше) разработчиков, сидящих в одном офисе не могут сделать кору сайта лучше, чем разработчики популярных движков, которыми пользуются, а значит постоянно тестируют, многие-многие люди. Но я не об этом.</div>

 

Бывает так, что видишь сайт и становится интересно на чем он написан. Не для каждого сайта можно это определить, так как по прежнему считается модным в среде веб-студий писать свои движки. Не навязываю свое мнение, но даже десяток (а обычно их гораздо менбше) разработчиков, сидящих в одном офисе не могут сделать кору сайта лучше, чем разработчики популярных движков, которыми пользуются, а значит постоянно тестируют, многие-многие люди. Но я не об этом.

 

<div style="line-height: 40px;">Бывает так, что видишь сайт и становится интересно на чем он написан. Не для каждого сайта можно это определить, так как по прежнему считается модным в среде веб-студий писать свои движки. Не навязываю свое мнение, но даже десяток (а обычно их гораздо менбше) разработчиков, сидящих в одном офисе не могут сделать кору сайта лучше, чем разработчики популярных движков, которыми пользуются, а значит постоянно тестируют, многие-многие люди. Но я не об этом.</div>

 

Бывает так, что видишь сайт и становится интересно на чем он написан. Не для каждого сайта можно это определить, так как по прежнему считается модным в среде веб-студий писать свои движки. Не навязываю свое мнение, но даже десяток (а обычно их гораздо менбше) разработчиков, сидящих в одном офисе не могут сделать кору сайта лучше, чем разработчики популярных движков, которыми пользуются, а значит постоянно тестируют, многие-многие люди. Но я не об этом.

 

<div style="line-height: 2em;">Бывает так, что видишь сайт и становится интересно на чем он написан. Не для каждого сайта можно это определить, так как по прежнему считается модным в среде веб-студий писать свои движки. Не навязываю свое мнение, но даже десяток (а обычно их гораздо менбше) разработчиков, сидящих в одном офисе не могут сделать кору сайта лучше, чем разработчики популярных движков, которыми пользуются, а значит постоянно тестируют, многие-многие люди. Но я не об этом.</div>

 

 
Бывает так, что видишь сайт и становится интересно на чем он написан. Не для каждого сайта можно это определить, так как по прежнему считается модным в среде веб-студий писать свои движки. Не навязываю свое мнение, но даже десяток (а обычно их гораздо менбше) разработчиков, сидящих в одном офисе не могут сделать кору сайта лучше, чем разработчики популярных движков, которыми пользуются, а значит постоянно тестируют, многие-многие люди. Но я не об этом.

 

А теперь рассмотрим использование line-height для вертикального выравнивания внутри блока. Допустим, есть блок, высотой 100px, внутри него некоторый текст. Нужно текст вертикально центрировать.

 

<div style="width: 100px; height: 100px; background: red; vertical-align: middle;">line-height</div>

 

 

line-height

 

 

Как видим, свойство vertical-align не сработало. Применим line-height. Ему нужно задать значение, равное высоте блока:

 

 

<div style="width: 100px; height: 100px; background: red; vertical-align: middle; line-height: 100px;">line-height</div>

 

 

line-height

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов