Normal line height: jQuery/CSS: line-height of «normal» == ?px

Leave a Comment / Разное / By /

line-height — CSS — Дока

Кратко

Секция статьи «Кратко»

line-height задаёт интервал между строчками текста, который называют интерлиньяж.

Примеры

Секция статьи «Примеры»

Стандартный интервал:

.selector {  line-height: normal;}
          .selector {
  line-height: normal;
}

Множитель — расстояние будет в 3.5 раза больше, чем размер текста:

.selector {  line-height: 3.5;}
          .selector {
  line-height: 3.5;
}

Условные единицы — значение, относительно стандартного интервала.
В данном случае, интервал будет в 3 раза больше интервала родительского элемента.

.selector {  line-height: 3em;}
          .selector {
  line-height: 3em;
}

Проценты — размер интервала высчитывается относительно размера шрифта:

.selector {  line-height: 34%;}
          .selector {
  line-height: 34%;
}

Как понять

Секция статьи «Как понять»

С помощью line-height можно выбрать, насколько большое расстояние будет между строчками текста. Обычно это расстояние немного больше, чем высота шрифта.

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

Как браузеры понимают свойство line-height

Как пишется

Секция статьи «Как пишется»

Задать свойство line-height можно одним из нескольких значений. Самый предсказуемый вариант — с помощью числа. У свойства line-height не может быть отрицательного значения.

  • normal — значение по умолчанию. Немного отличается в разных браузерах, но, как правило, равно 1.2. Это значит, что расстояние между строчками будет равно размеру шрифта font-family, помноженному на 1. 2.
  • число — число без единиц измерения. Например, значение 1.5 значит, что высота строчки будет равна размеру шрифта font-family, помноженному на 1.5.
  • длина — например, пиксели px, условные единицы шрифта em, дюймы in, пункты pt и так далее.
  • проценты — например, line-height: 120%. За 100% берётся размера шрифта font-size.

Лучше задавать интерлиньяж числом, чтобы, при увеличении размера шрифта, увеличивалось и расстояние между строчками.

Задавать высоту строки в каких-то единицах измерения не самый лучший вариант, потому что тогда высота строки не подстраивается автоматически под размер шрифта и может выглядеть не так, как ожидается.

Подсказки

Секция статьи «Подсказки»

💡 Самый надёжный способ задать интервал между строчками — с помощью числа, например, 1. 5. При увеличении масштаба страницы этот интервал увеличится соответствующим образом.

💡 Для обычного текста чаще всего используют полуторный интервал line-height: 1.5. С таким интервалом текст удобнее читать.

💡 Ещё один способ задать интервал между строк — шорткат font. При этом обязательно сразу указать семейство шрифтов font-family. Например:

div {  font: 10px/1.2 Georgia, "Bitstream Charter", serif;}
          div {
  font: 10px/1.2 Georgia, "Bitstream Charter", serif;
}

Ещё примеры

Секция статьи «Ещё примеры»

Попробуем задать одно и то же расстояние между строчками с помощью разных значений. Каждое значение будет умножаться на размер шрифта font-size:

Число:

div {  line-height: 1.2;  font-size: 10px;}
          div {
  line-height: 1.2;
  font-size: 10px;
}

Длина:

div {  line-height: 1. 2em;  font-size: 10px;}
          div {
  line-height: 1.2em;
  font-size: 10px;
}

Процент:

div {  line-height: 120%;  font-size: 10px;}
          div {
  line-height: 120%;
  font-size: 10px;
}

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

Спойлер: простое число умножается на высоту шрифта того же элемента, а, например, значение em — на высоту шрифта родительского элемента:

<div>  <h2>Тут мы задали интервал с помощью числа 1.2</h2>  Оно умножается на размер шрифта этого же элемента. Это удобно и предсказуемо.</div><div>  <h2>А здесь мы ввели 1.2em</h2>  Это значит, что 1.2 умножается на размер шрифта родительского элемента, в  нашем случае  <div>, а не на размер заголовка. Это вносит путаницу.</div></div>
          
 
<div>
  <h2>Тут мы задали интервал с помощью числа 1.2</h2>
  Оно умножается на размер шрифта этого же элемента.  Это удобно и предсказуемо.
</div>
<div>
  <h2>А здесь мы ввели 1.2em</h2>
  Это значит, что 1.2 умножается на размер шрифта родительского элемента, в
  нашем случае
  <div>, а не на размер заголовка. Это вносит путаницу.</div>
</div>

h2 {  font-size: 30px;}.box {  width: 18em;  padding: 20px;  display: inline-block;  vertical-align: top;  font-size: 15px;}.box_green {  line-height: 1.2;  background-color: #49a16c;}.box_blue {  line-height: 1.2em;  background-color: #1a5ad7;}
          h2 {
  font-size: 30px;
}
.box {
  width: 18em;
  padding: 20px;
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
}
.box_green {
  line-height: 1.2;
  background-color: #49a16c;
}
.box_blue {
  line-height: 1.2em;
  background-color: #1a5ad7;
}
Открыть демо в новой вкладке

На практике

Секция статьи «На практике»

Алёна Батицкая советует

Секция статьи «Алёна Батицкая советует»

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

Используй следующую функцию для расчёта относительного интерлиньяжа:

line height / font size = относительный line-height

Если размер шрифта в Фотошопе равен 58px, а межстрочное расстояние — 86px, то результат будет таким:

86 / 58 = 1.482758621

При округлении получим значение

1.5.

🛠 Если в Фотошопе интерлиньяж не указан (пустое поле), то он равен стандартному значению — 120%. Что аналогично 1.2 для вёрстки.

Относительная высота строки — Оформление текста — HTML Academy

Загрузка…
Через несколько секунд всё будет готово

  • index.html
  • style.css

HTML

<!DOCTYPE html> <html lang=»ru»> <head> <meta charset=»utf-8″> <title>Сайт начинающего верстальщика</title> <link rel=»stylesheet» href=»style. css»> </head> <body> <header> <h2>Сайт начинающего верстальщика</h2> </header> <main> <img src=»img/raccoon.svg» alt=»Аватарка»> <nav> <h3>Записи в блоге</h3> <ul> <li><a href=»day-1.html»>День первый. Как я забыл покормить кота</a></li> <li><a href=»day-2.html»>День второй. Хочу быть верстальщиком</a></li> <li><a href=»day-3.html»>День третий. Мой кот на меня обиделся</a></li> <li><a href=»day-4.html»>День четвёртый. Как я чуть не заболел</a></li> <li><a href=»day-5.html»>День пятый. Отдыхаю</a></li> <li><a href=»day-6.html»>День шестой. Как я ничего не понял, продолжение</a></li> <li><a href=»day-7.html»>День седьмой. Кекс выдал мне задание</a></li> <li><a href=»day-8.

html»>День восьмой. Очень серьёзный</a></li> <li><a href=»day-9.html»>День девятый. Точнее ночь</a></li> <li><a href=»day-10.html»>День десятый. Подведение итогов</a></li> <li><a href=»day-11.html»>День одиннадцатый. Без фанатизма</a></li> <li><a href=»day-12.html»>День двенадцатый. Все любят печенье</a></li> <li><a href=»day-13.html»>День тринадцатый. Нашёл статью</a></li> <li><a href=»day-14.html»>День четырнадцатый. Новый формат</a></li> <li><a href=»day-15.html»>День пятнадцатый. Галерея селфи</a></li> </ul> </nav> <section> <p>Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл <a href=»https://htmlacademy.ru/courses»>тренажёры по HTML и CSS</a> и поставил перед собой цель — стать им.
У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.</p> <p>Моё первое задание — вести дневник и честно писать обо всех своих свершениях.</p> </section> <section> <h3>Навыки</h3> <dl> <dt>HTML</dt> <dd><div>60%</div></dd> <dt>CSS</dt> <dd><div>20%</div></dd> <dt>JS</dt> <dd><div>10%</div></dd> </dl> </section> </main> <footer> Подвал сайта </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: «Arial», sans-serif; color: #222222; background: #ffffff url(«img/bg-page.png») no-repeat top center; } h2 { font-size: 24px; } h3 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } .

page-title { font-size: 36px; line-height: 42px; } .avatar { border-radius: 50%; } .blog-navigation { margin-bottom: 30px; padding: 20px; color: #ffffff; background-color: #4470c4; border: 5px solid #2d508f; } .blog-navigation h3 { margin-top: 0; } .blog-navigation ul { padding-left: 0; list-style: none; } .blog-navigation li { margin-bottom: 5px; } .blog-navigation a { color: #ffffff; } .skills dd { margin: 0; margin-bottom: 10px; background-color: #e8e8e8; } .skills-level { font-size: 12px; text-align: center; color: #ffffff; background-color: #4470c4; } .skills-level-ok { background-color: #47bb52; } footer { margin-top: 30px; }

Что в задании вам не понравилось?

Не работает проверка кодаЗадание слишком сложноеНепонятная теорияДругое (сейчас напишу)

Другое (сейчас напишу)

Спасибо! Мы скоро всё исправим)

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

ЗадачиВыполнено

  1. Для класса .page-title смените значение размера шрифта на 60px,
  2. затем — значение высоты строки на 120%
  3. и потом верните .page-title исходное значение размера шрифта — 36px.

Свойство высоты строки CSS

❮ Пред. Следующий ❯

Свойство line-height определяет высоту строки. Возможны три ситуации:

  • В элементах блочного уровня свойство line-height указывает минимальную высоту строк строковых блоков в элементе.
  • Для незаменяемых встроенных элементов свойство line-height указывает высоту, которая используется при расчете высоты строки.
  • При замене встроенных элементов, таких как кнопки или другие элементы ввода, свойство line-height не влияет.

Допустимы отрицательные значения.

Высота строки по умолчанию составляет от 110% до 120% для большинства браузеров.

Свойство line-height задает интерлиньяж строк текста. Если значение высоты строки больше, чем значение размера шрифта элемента, разница будет заключаться в интерлиньяже текста.

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

 line-height: normal | номер | длина | начальная | наследовать;

Пример свойства line-height: 

 

  <голова>
    Название документа
    <стиль>
      дел {
        высота строки: нормальная;
      }
    
  
  <тело>
     
Пример свойства Line-height
 
     
высота строки: обычная (по умолчанию)
 
    
Это абзац со стандартной высотой строки.
      
 Стандартная высота строки в большинстве браузеров составляет от 110% до 120%.

Попробуй сам »

Результат

Пример свойства line-height со значением «длина»: 

 

  <голова>
    Название документа
    <стиль>
      дел {
        высота строки: 10 пикселей;
      }
    
  
  <тело>
     
Пример свойства Line-height
 
     
высота строки: 10 пикселей
 
    
Это абзац с заданной высотой строки. 
      
 Высота строки здесь установлена ​​на 10 пикселей.

Попробуй сам »

Пример свойства line-height со значением «процент»: 

 

  <голова>
    Название документа
    <стиль>
      дел {
        высота строки: 200%;
      }
    
  
  <тело>
     
Пример свойства Line-height
 
     
высота строки: 200%
 
    
Это абзац с большей высотой строки.
      
 Высота строки здесь установлена ​​на 200%.

Попробуй сам »

Пример свойства line-height со всеми значениями: 

 

  <голова>
    Название документа
    <стиль>
      div.a {
        высота строки: 1;
      }
      div.b {
        высота строки: 50px;
      }
      div.c {
        высота линии: 0,5 см;
      }
      div.d {
        высота линии: 1 см;
      }
      div.e {
        высота строки: 200%;
      }
      div. f {
        высота строки: нормальная;
      }
    
  
  <тело>
     
Пример свойства Line-height
 
     
высота строки: 1
 
    
Это абзац с заданной высотой строки.
      
 Высота строки здесь установлена ​​равной 1.
    

     
высота строки: 50 пикселей
 
    
Это абзац с заданной высотой строки.
      
 Высота строки здесь установлена ​​на 50 пикселей.
    

     
высота линии: 0,5 см
 
    
Это абзац с заданной высотой строки.
      
 Высота строки здесь установлена ​​равной 0,5 сантиметра.
    

     
высота строки: 1 см
 
    
Это абзац с заданной высотой строки.
      
 Высота строки здесь установлена ​​равной 1 сантиметру.
    

     
высота строки: 200%
 
    
Это абзац с большей высотой строки.
      
 Высота строки здесь установлена ​​на 200%.
    

     
высота строки: нормальная
 
    
Это абзац со стандартной высотой строки.
      
 Стандартная высота строки в большинстве браузеров составляет от 110% до 120%.

Попробуй сам »

Свойство line-height можно использовать для создания различных интересных стилей. Например, вы можете использовать свойство line-height, чтобы придать каждой строке текста свой цвет. Здесь вы можете использовать линейный градиент () с цветовыми точками. Или вы можете использовать это свойство для размещения линий между текстами с помощью Repeating-linear-gradient().


css — значение высоты строки по умолчанию, если размер шрифта равен 100%

спросил

Изменено 2 месяца назад

Просмотрено 29 тысяч раз

Я должен переопределить стиль тела моей страницы:

 body{
    размер шрифта: 14px;
    высота строки: 20 пикселей;
}

переопределение:

 тело {
    размер шрифта: 100%;
    высота линии:?????;
}

Каково значение свойства line-height по умолчанию, если я указал размер шрифта: 100% ?

Существует ли строгая связь между этими свойствами?

По умолчанию высота строки равна normal , поэтому используйте:

 body {
    размер шрифта: 100%;
    высота строки: нормальная;
}

FYI, вы можете подтвердить это, если у вас есть Chrome, открыв веб-сайт, проверив элемент и просмотрев унаследованные вычисляемые стили.

2

Установить безразмерное значение 1 , что умножит рассчитанный размер шрифта (т. е. насколько большим окажется шрифт) на 1, что обеспечит достаточно большую высоту строки.

Вы также можете использовать 1,5 для большего расстояния.

Итак, чтобы закончить ваш код, это будет

 body{
  размер шрифта: 100%;
  высота строки: 1,5;
}

Дополнительные сведения см. в разделе https://developer.mozilla.org/en-US/docs/CSS/line-height. Использование безразмерного числа указано как предпочтительный способ установки высоты строки.

1

Значения

обычный

Зависит от пользовательского агента. Настольные браузеры (включая Firefox) используют значение по умолчанию примерно 1.2 , в зависимости от семейства шрифтов элемента .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *