Межстрочный интервал на CSS | Трепачёв Дмитрий
Давайте теперь научимся задавать межстрочный интервал тексту. Под межстрочным интервалом подразумевается расстояние между линиями текста, то есть белый промежуток между ними. Для этого предназначено свойство line-height, задающее высоту линии текста.
При использовании свойства line-height вас может ожидать некоторый подвох: это свойство не задает промежуток между строками текста, как могло бы показаться, а задает высоту линии текста.
Это значит, что реальный видимый промежуток между строками будет вычисляться так: line-height — font-size = видимое расстояние между строками текста.
В следующем примере расстояние между строками текста будет line-height — font-size = 50px — 20px = 30px:
<p>
длинный текст...
</p> p {
font-size: 20px;
line-height: 50px;
text-align: justify;
width: 400px;
}
:
Пусть размер шрифта для абзацев равен 30px. Установите свойство line-height так, чтобы видимый белый промежуток между абзацами был равен 15px.
Значение line-height без единиц
Значением свойства line-height не обязательно должно служить число в некоторых единицах. Можно также просто написать число или дробь. В этом случае настоящее значение line-height можно будет найти, умножив его на значение font-size.
К примеру, font-size равен 10px, а line-height — 1.5. В этом случае реальное значение line-height будет 10px * 1.5 = 15px. Ну, а видимый белый промежуток между линиями текста будет 5px: line-height — font-size = 15px — 10px = 5px.
Преимущество такого способа задания line-height в том, что при изменении размера шрифта автоматически будет меняться и межстрочный интервал.
Посмотрим применение описанного на примере:
<p>
длинный текст...
</p> p {
font-size: 20px;
line-height: 1.5;
text-align: justify;
width: 400px;
}:
Пусть размер шрифта для абзацев равен 30px. Установите свойство line-height так, чтобы видимый белый промежуток между абзацами был равен 15px. Используйте для этого значение line-height без единиц.
Свойство line-height — межстрочный интервал (высота линии текста)
Свойство line-height устанавливает интервал между строками текста (межстрочный интервал).
Свойство не задает промежуток между строками текста, как могло бы показаться, оно задает высоту линии текста. Это значит, что реальный промежуток между строками будет вычисляться так: line-height — font-size = расстояние между строками текста. Или наоборот line-height = font-size + расстояние между строками текста.
Синтаксис
Значения
Значением свойства служат любые единицы для размеров. При указании значения в % межстрочный интервал будет в процентах от размера шрифта.
Кроме того, можно задать значением любое число больше нуля. В этом случае оно воспринимается как множитель от размера шрифта. Например, если font-size имеет значение 20px, а line-height — 1.5, то это все равно, что написать line-height: 30px (20px * 1.5 = 30px).
По умолчанию свойство имеет значение normal, в этом случае браузер выбирает межстрочный интервал автоматически.
Пример
В данном примере расстояние между строками текста будет line-height — font-size = 38px — 18px = 20px:
<p>
какой-то текст...
</p> p {
font-size: 18px;
line-height: 35px;
text-align: justify;
}
:
Пример
Уменьшим промежуток до 25px — 18px = 7px:
<p>
какой-то текст...
</p> p {
font-size: 18px;
line-height: 25px;
text-align: justify;
}
:
Пример
В данном примере расстояние между строками текста будет line-height — font-size = 18px — 18px = 0px — строки практически слипнуться (хвостики букв верхней строки будут касаться хвостиков букв нижней):
<p>
какой-то текст...
</p> p {
font-size: 18px;
line-height: 18px;
text-align: justify;
}
:
Пример
В данном примере значение line-height — множитель 1.5 от размера шрифта. Следовательно
<p>
какой-то текст...
</p> p {
font-size: 18px;
line-height: 1.5;
text-align: justify;
}
:
Пример
Увеличим множитель:
<p>
какой-то текст...
</p> p {
font-size: 18px;
line-height: 2.5;
text-align: justify;
}
:
Пример
Если сделать line-height меньше font-size, то строки вообще налезут друг на друга:
<p>
какой-то текст...
</p> p {
font-size: 18px;
line-height: 13px;
text-align: justify;
}
:
Сбивается межстрочный интервал — свойство css line-height
Нынче поправлял сайт одной знаменитой блогерше (имени не называю: боюсь преследования)) — так вот, поправлял, скажем так, вёрстку блога: ей кто-то из читателей подсказал, мол, текст при перезагрузках страниц то и дело принимает различный графический вид, попросту — меняется межсточный интервал при переходе от страницы к странице на мобильнике… (говорилось о браузере Опера-Мини).
Скажу честно, сразу мелькнуло подозрение закавыки со свойством line-height, но я как-то о нём подзабыл в процессе… короче взялся за работу…
Чем такие поломки дизайна сайта сложны? а тем, что их нужно отслеживать на реальном девайсе — ни тестерах всяких, но реальном гаджете. Почему? а потому что всякие тестеры на компе естественно имеют мощность используемого компьютера/ браузера! Попросту говоря — многие из тонких дефектов не отследить…
Работа была выполнена. Заказчица довольна: и теперь не теряет многочисленных читателей, которые почитывают её посты по ночам с телефонов))
И если кому-то тема интересна, давайте разбираться: акуна-матата…
в качестве нерекламы: (хотя всегда нужно сказать пару лестных слов, коли разработчики их заслуживают))
На мой взгляд, нынче есть достаточно неплохой браузер для обычных пользователей и их мобильников — Опера мини.
Главное его преимущество — лёгкость и скорость загрузки просматриваемых страниц, что немаловажно, имея у себя в арсенале качества нашего высокоскоростного интернета.
Я видел много товарищей (достаточно продвинутых в иной сфере, однако — мелких познаний интернетing)) которые ждут по минуте-две загрузку простенького сайта: это логично — если браузер без всяких экономических ограничений грузит всякие примочки js и пр. пр. прелести, фитюльки которых хороши только на стационарном компе. На мои советы использовать Оперу, большинство пользователей реагирует как на волка из леса, дескать, нужно переустанавливать «родной» браузер и причём ненароком попортить телефон… У меня все эти осторожности вызывают улыбку…
Ну ладно — приступим к теме:
к оглавлению $
ошибки css вёрстки — свойство line-height
Короче, в итоге около часовых исследований недр сайта на предмет лага (ошибки, бага… как угодно) оказалось виною свойство line-height, а точнее его значение !
Что получалось при моих тестах:
При заходе на странички сайта вроде бы всё в порядке… однако, спустя пару перезагрузок — ошибка на лице окна браузера: действительно — расстояние между строк изменилось, стало в два раза шире по вертикали. В принципе можно читать и такой образ текста на мобиле… да и к тому же в мощных браузерах (и конечно же на компах) никаких ошибок не будет видно !! однако, заказчица (да и я) сочли этот экзерсис именно ошибкой, а коли — ошибка, значит нужно решать задачу!
Примечательно:
если просматривать сайт, не включая экономичный режим браузера — всё нормально (разъяснится ниже по тексту) но как только переключаюсь в режим экономии МГб и скоростей — баг !
К стати сказать: структура текста сайта возможно сломается и в шапке сайта, и в подвале, и в сайдбаре — всё в прямой зависимости от языка (и ошибок) документа CSS вашего сайта!
Не забывайте обновлять документацию во время !
И всё-таки почему такие ошибки и нечитаемость браузером происходят??
Тут вряд ли стоит винить кого-то конкретно из разработчиков: всего интернета или же конкретного браузера, либо программистов в целом))
Кратко:
Опера-мини использует множества своих сторонних серверов, проходя через которые данные сайта обрабатываются и доставляются клиенту (нам с вами) — ввиду чего «браузер» добивается приличных скоростей загрузки… и как следствие приятной работы.
Как нетрудно догадаться, в случаях всяких сокращений возможны какие-то незначительные потери, коли в вёрстке просматриваемого сайта присутствуют ошибки!
Так же можно предположить «нечитаемость» всевозможными временными адаптациями языка CSS.
И это справедливо: ведь существуют правила языков программирования!! Вот об этих правилах коротенько и потолкуем:
Такое свойство line-height, в случае применения к блочному элементу, всегда определяет высоту каждой текстовой строки. Однако не следует путать с межстрочным расстоянием (меж графическими элементами) в большинстве же графических программ (наподобие Photoshop), которое определяет пространство между строками в абзаце.
Следует запомнить и не забывать, что, несмотря на то, что это значение сво-ства выполняет одну и ту же задачу, а именно интервал между строк текста, выполняется (обрабатывается) это по-разному.
Свойство line-height использует следующие единицы:
- px
- em
- %
- безразмерные числа, вроде 1.5
Вот о безразмерных числа свойства и поговорим пристальнее)
Эти безразмерные значения в основном действуют как проценты. Таким образом — 150% равно 1.5. …последнее является, как понимаете, более компактным и читаемым, а в нашем случае обусловило ошибку нечитаемого экономным вариантом браузером.
То есть в шаблоне заказчицы (в файле стилей) свойство было во всех случаях обозначено в px, что и привело к нечитаемости, а следовательно и ошибке.
Мне пришлось полностью прогнать файл стилей и поправить несоответствия.
Но — неприятность эту, мы пережили…
Знаний для:
к оглавлению $
почему важны правила line-height
Основной целью line-height является непременное определение комфортного расстояния (отступов) между строк для текста. Поскольку благоприятная удобочитаемость зависит от размера же текста, непременно рекомендуется использовать динамическое значение обусловленное размером текста.
Использование px — не рекомендуется, так как пиксели определяют статическое значение данных.
Однако использование пикселей в некоторых смыслах действительно пригодится — например, если вы хотите выровнять текст по вертикали в соответствии с иным каким-то элементом блога/сайта, а не в зависимости от размера шрифта!
Поскольку применение % или em может дать неожиданный результат, рекомендуемый метод связан с безразмерными числами:
для основного текста line-height рекомендуется как 1.5 от размера текста;
для заголовков line-height рекомендуется значение 1.2.
body { font-size: 16px; line-height: 1.5; }
Обработанная и вычисленная высота строки будет в нашем примере 16** 1.5 = 24px
к оглавлению $
наследование свойства line-height
К сведению:
Поскольку такое свойство как line-height наследуется дочерними элементами, то оно во всех графических примерах сайта будет оставаться постоянным, независимо от величин, которые font-size впоследствии применяется.
body { font-size: 16px; line-height: 1.5; }
blockquote { font-size: 18px; }
К примеру элемент <blockquote> будет иметь высоту строки 27px — полезно знать, ибо значения blockquote некоторые админы применяют в комментариях… следует визуализировать разность от основного текста статей.
На этом занавес представления опускается…
…на рампы пыль печальная ложится…
…и конечно же, читайте статьи сайта и подписывайтесь:
Делюсь горьким опытом — кое-какими знаниями, для вашего сладкого благополучия))
Подписаться на life-News студии ATs media fashion squad
…вопросы в комментариях — помогу, в чём дюжу…
mihalica.ru !
Как увеличить расстояние между строками в html. Межсимвольный, межстрочный интервал CSS. Расстояние между словами. Межстрочный интервал: line-height
Свойство line-height устанавливает интервал между строками текста (межстрочный интервал). Свойство не задает промежуток между строками текста как могло бы показаться, оно задает высоту линии текста . Это значит, что реальный промежуток между строками будет вычисляться так: line-height — font-size = расстояние между строками текста. Или наоборот line-height = font-size + расстояние между строками текста.
Свойство line-height иногда используется нестандартным образом для центрирования текста по высоте.
Синтаксис
Селектор { line-height: CSS единицы | проценты | множитель | normal | inherit; }
Значения
По умолчанию браузер выбирает межстрочный интервал автоматически (normal ).
Примеры
Пример
line-height — font-size = 35px — 13px = 21px:
P { font-size: 13px; line-height: 35px; }
Результат выполнения кода:
Пример
Уменьшим промежуток до 21px — 13px = 7px :
P { font-size: 13px; line-height: 21px; }
Результат выполнения кода:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.
Пример
В данном примере расстояние между строками текста будет line-height — font-size = 13px — 13px = 0px — строки практически слипнуться (хвостики букв верхней строки будут касаться хвостиков букв нижней):
P { font-size: 13px; line-height: 13px; }
Результат выполнения кода:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.
Пример
В данном примере значение line-height — множитель 1.5 от размера шрифта. Следовательно line-height будет эквивалентен font-size * 1.5 = 13px * 1.5 = 20px . А реальный промежуток между строками будет line-height — font-size = 20px — 13px = 7px :
P { font-size: 13px; line-height: 1.5; }
Результат выполнения кода:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.
Пример
Увеличим множитель:
P { font-size: 13px; line-height: 2.5; }
Результат выполнения кода:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.
Пример
Если сделать line-height меньше font-size , то строки вообще налезут друг на друга:
P { font-size: 13px; line-height: 9px; }
Результат выполнения кода.
Свойство line-height устанавливает интервал между строками текста (межстрочный интервал). Свойство не задает промежуток между строками текста как могло бы показаться, оно задает высоту линии текста . Это значит, что реальный промежуток между строками будет вычисляться так: line-height — font-size = расстояние между строками текста. Или наоборот line-height = font-size + расстояние между строками текста.
Свойство line-height иногда используется нестандартным образом для центрирования текста по высоте.
Синтаксис
Селектор { line-height: CSS единицы | проценты | множитель | normal | inherit; }
Значения
По умолчанию браузер выбирает межстрочный интервал автоматически (normal ).
Примеры
Пример
line-height — font-size = 35px — 13px = 21px:
P { font-size: 13px; line-height: 35px; }
Результат выполнения кода:
Пример
Уменьшим промежуток до 21px — 13px = 7px :
P { font-size: 13px; line-height: 21px; }
Результат выполнения кода:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.
Пример
В данном примере расстояние между строками текста будет line-height — font-size = 13px — 13px = 0px — строки практически слипнуться (хвостики букв верхней строки будут касаться хвостиков букв нижней):
P { font-size: 13px; line-height: 13px; }
Результат выполнения кода:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.
Пример
В данном примере значение line-height — множитель 1.5 от размера шрифта. Следовательно line-height будет эквивалентен font-size * 1.5 = 13px * 1.5 = 20px . А реальный промежуток между строками будет line-height — font-size = 20px — 13px = 7px :
P { font-size: 13px; line-height: 1.5; }
Результат выполнения кода:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.
Пример
Увеличим множитель:
P { font-size: 13px; line-height: 2.5; }
Результат выполнения кода:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.
Пример
Если сделать line-height меньше font-size , то строки вообще налезут друг на друга:
P { font-size: 13px; line-height: 9px; }
Результат выполнения кода.
Довольно часто у начинающих верстальщиков возникают проблемы при освоении каскадных таблиц стилей (CSS). Не исключением является работа с межстрочными интервалами в CSS. Межстрочный интервал — это расстояние между строчками по вертикали. Как и в обычном документе Microsoft Word, в тексте html-файла тоже можно изменять этот параметр.
Использование line-height при изменении интервала
Первым и самым правильным вариантом решения проблемы с интервалами будет задание значения свойству line-height. По умолчанию значение этого свойства равняется normal (line-height: normal;). Межстрочный интервал вычисляется автоматически самим интернет-браузером и зависит, в частности, от вида шрифта, а также его размера. Любое положительное цифровое значение, которое будет задано в стилевом свойстве line-height, браузер будет воспринимать как число, на которое необходимо умножить размер текущего шрифта.
В CSS межстрочный интервал может задаваться в разных единицах длины: пункты (pt), дюймы (in), пиксели (px) и проценты (%). Процент рассчитывается относительно текущего шрифта, и по умолчанию его значение равняется 100 %. Не стоит забывать, что свойство line-height заимствует значение свойства inherit у своего родительского элемента.
Приведем несколько примеров, как увеличить межстрочный интервал в CSS:
Процесс работы с межстрочными интервалами достаточно прост. У вас должны быть начальные знания CSS и умение подключать файл к главной странице html. Стили также можно задавать прямо на html-странице:
Чтобы в данном предложении сделать полуторный интервал, необходимо в файле CSS добавить такой код:
line-height: 1.5;
Для того, чтобы сделать двойной интервал, можно прописать такой код:
line-height: 200%;
В обоих случаях браузер будет понимать, что нужно текущий шрифт умножить на 2. Это значение и будет межстрочным интервалом.
Теперь приведем пример, как уменьшить межстрочный интервал (CSS):
Как уменьшить расстояние между строками в HTML — Вокруг-Дом
Использование HTML позволяет легко создавать основные веб-страницы и управлять различными атрибутами этих страниц, включая шрифт, размер текста, цвет и межстрочный интервал. Уменьшение расстояния между строками может быть полезно, если вам необходимо сжать веб-страницу или уменьшить пробелы по эстетическим соображениям. К счастью, уменьшение интервала между строками — это просто несколько быстрых вставок в HTML-файл страницы.
Вы можете уменьшить расстояние между строками непосредственно в HTML-файле веб-страницы.Шаг 1
Определите раздел вашего HTML-документа, который соответствует части вашей веб-страницы, для которой вы хотите уменьшить расстояние между строками.
Шаг 2
Включите этот раздел документа в тег «». Тег «», также известный как тег деления, отмечает раздел HTML, к которому вы хотите применить определенный стиль. Вставьте «» в начале раздела и «» в конце раздела.
Шаг 3
Вставьте «style =» в первый тег «» следующим образом:. Оператор «style» сигнализирует браузеру, отображающему веб-страницу, что он должен стилизовать часть страницы, заключенную в теги «деление», особым образом, который отличается от остальной части веб-страницы.
Шаг 4
Поместите текст «line-height:» в кавычки после оператора стиля следующим образом:. Не забудьте включить двоеточие после текста. Атрибут «line-height» сообщает браузеру, что он должен изменить расстояние между строками для части страницы, заключенной в теги Div.
Шаг 5
Вставьте число, за которым следует знак процента после двоеточия, следующего за атрибутом «line-height», следующим образом:. Число, которое вы вставляете, — это желаемый межстрочный интервал, выраженный в процентах от текущего межстрочного интервала страницы. Например, если вы вставите 50, расстояние между строками будет вдвое меньше текущего, а если вы вставите 200, то расстояние будет вдвое больше текущего. Вставьте любое число меньше 100, чтобы уменьшить расстояние между строками в разделе, заключенном в теги деления.
Шаг 6
Сохраните ваш HTML-документ и протестируйте его, открыв его в веб-браузере, чтобы увидеть, как он будет выглядеть для читателей, получающих к нему доступ через Интернет.
Уменьшить отступы между строками » Основы Web сайтов
Чтобы изменить промежутки между строками текста,используют свойство line-height атрибута style, обязательно указывая величину этого расстояния (например,1-одинарный интервал, 1,5 -полуторный, 2-двойной и т.д.)
<p style=»line-height:2″> Вкусная еда и приятное застолье -одно из главных удовольствий в жизни. Ведь еда— это то, что едят, чем питаются — это любое вещество, пригодное для еды и питья живого организма. </p>
Данный пример хорошо использовать для отдельных абзацев, а для всего текста подойдёт второй вариант.
Для этого воспользуемся таким кодом, который нужно разместить в парном дескрипторе <head>и </head>.
<!DOCTYPE html>
<html>
<head>
<meta charset=«utf-8»>
<title>Всё о еде</title>
<style>
p.dline { line-height: 1.5; }
P { line-height: 0.9em; }
</style>
</head>
<body>
<p class=«dline»> Вкусная еда и приятное застолье -одно из главных удовольствий в жизни. Ведь еда— это то, что едят, чем питаются — это любое вещество, пригодное для еды и питья живого организма.</p>
<p> Вкусная еда и приятное застолье -одно из главных удовольствий в жизни. Ведь еда— это то, что едят, чем питаются — это любое вещество, пригодное для еды и питья живого организма.</p>
</body>
</html>
Значение line-height допустимо задавать и в других единицах CSS, например, пикселах (px), процентах (%) и др. В данном примере для первого абзаца установлен полуторный интерлиньяж, а для второго — межстрочное расстояние равно 0.9em.