Как задать межстрочный интервал в CSS и HTML?
В этой небольшой статье я хочу рассказать об одном полезном свойстве, позволяющем изменять межстрочный интервал в HTML и CSS.
Это может вам понадобиться для того чтобы сделать чтение текста более комфортным, а также изменить внешний вид текста, его расположение в блоке и даже выровнять этот текст по вертикали.
Навигация по статье:
- Как задать межстрочный интервал CSS?
- Как задать межстрочный интервал html?
- Использование межстрочного интервала в HTML и CSS для выравнивание по вертикали и задания отступов.
Как задать межстрочный интервал CSS?
Для задания межстрочного интервала в CSS существует специальное свойство line-height. Дословно оно переводится как высота строки.
Это CSS-свойство может принимать несколько значений:
-
1. Множитель (число). Например:
line-height: 1.5;
Пример изменения межстрочного
интервала текста в HTML и СSS.
line-height: 20px;
Пример изменения межстрочного
интервала текста в HTML и СSS.
line-height: 180%;
Пример изменения межстрочного
интервала текста в HTML и СSS.
line-height: inherit;
Пример изменения межстрочного
интервала текста в HTML и СSS.
line-height: normal;
Пример изменения межстрочного
интервала текста в HTML и СSS.
Лично мне больше всего нравится первый способ. Так как он прост и понятен в использовании и при этом интервал сохраняется при изменении размера шрифта.
Как задать межстрочный интервал html?
Какого-то специального тега, который бы изменял межстрочный интервал в HTML нет. Поэтому для его изменения можно воспользоваться следующими способами:
-
1. Использовать атрибут style, внутри которого использовать то же свойство line-height с нужными нам параметрами.
Например:
Пример изменения межстрочного
интервала текста в HTML и СSS.
line-height : 120% ;
Пример изменения межстрочного
интервала текста в HTML и СSS.
В идеале тег style должен располагаться в теге , но работать он будет в любом месте страницы.
Использование межстрочного интервала в HTML и CSS для выравнивание по вертикали и задания отступов.
Если у вас, к примеру, есть кнопка или блок с заголовком, в котором нужно задать отступы сверху и снизу или выровнять этот текст по центру по вертикали, то тут вы так же можете воспользоваться CSS-свойством line-height.
Ниже приведён пример заголовка без межстрочного интервала и с ним.
Межстрочный интервал равен 0%
Межстрочный интервал равен 300%
Межстрочный интервал равен 0%
Межстрочный интервал равен 300%
Межстрочный интервал равен 0%
Межстрочный интервал равен 300%
Таким образом, при помощи данного CSS свойства вы можете изменять межстрочный интервал в HTML и CSS коде, и таким образом делать оформление ваших сайтов более привлекательным.
Спасибо что дочитали статью до конца! Если она была для вас полезной, то обязательно поделитесь ею в соцсетях. Так вы поможете мне в продвижении моего проекта.
Желаю вам успехов в оформлении ваших сайтов! До встречи в следующих статьях!
С уважением Юлия Гусарь
Как убрать отступ сверху и снизу текста
Как убрать отступ сверху и снизу текста? Изображение проблемы прилагаеться.
Отслеживать
задан 12 авг 2017 в 14:35
Astend Sanferion Astend Sanferion
594 6 6 серебряных знаков 15 15 бронзовых знаков
данный вопрос в виде картинки следует закрыть, потому что он бесполезен для базы знаний (тот, у кого возникнет подобный вопрос, не сможет найти данный вопрос и ответы к нему)
12 авг 2017 в 15:24
Лучше добавте проблемный код.
12 авг 2017 в 15:48
Полагаю, вам нужен reset.css или normalize.css (гуглятся на раз).
13 авг 2017 в 9:56
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
При помощи значения line-height .
Устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически. Отрицательное значение межстрочного расстояния не допускается.
line-height: множитель | значение | проценты | normal | inherit Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы длины, принятые в CSS — пикселы (px), дюймы (in), пункты (pt) и др. Разрешается использовать процентную запись, в этом случае за 100% берется высота шрифта.
normal Расстояние между строк вычисляется автоматически. inherit Наследует значение родителя.
Здравствуйте! Как уменьшить межстрочный интервал в тексте материала в шаблоне Eximium — Joomla 3.x: Шаблоны, разметка и макеты вывода
Сегодня важный день для проекта Joomla! Мы отмечаем два года напряженной работы наших добровольцев, решивших выпускать новую основную версию каждые два года. После большого количества обсуждений, спринтов по написанию кода и устранения ошибок этот день наконец настал и мы с гордостью объявляем о выпуске новой мажорной ( major ) версии Joomla 5.0, наряду с Joomla 4.4.
В Joomla Extensions Directory появился тег совместимости с Joomla 5.
Joomla-разработчики, проверившие совместимость своих расширений с Joomla 5 могут поставить галочку ��
JoomlaDay Spain, Madrid.
В Мадриде, Испания 5-6 октября 2023 года проходит Joomla Day — конференция, посвящённая как новичкам, так и профессионалам, работающим с Joomla.
Междустрочный интервал
Скажите, как сделать,чтоб сверху не было отступа вообще, а в этом тексте, что в моём коде, чтоб между строками было ровно по 1 см, я сделал по 1 см, но от верха также происходит отступ, как его убрать, не могу понять.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
1.0 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> html> head> meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> title>Моя первая страница/title> style type="text/css"> h3 < font-family:Arial; line-height: 2cm;>/style> /head> body> h3> p >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat./p>/p> Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. h3> /body> /html>
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Задать междустрочный интервал для тега абзаца
Прошу прощения, но даже незнаю к какой ветке отнести данный вопрос, поэтому напишу тут. (если можно.
Межстрочный интервал
Здравствуйте! Есть навязчивая идея прижать строки по вертикали, но стандартные средства bootstrap.
Уменьшить интервал меню
Здравствуйте:) Сразу перейду к проблеме: у меня меню на левом блоке неправильно отображается и.
Интервал между ячейками
Добрый день. Подскажите, пжл, как в CSS сделать так, чтобы интервал между ячейками был нулевым. В.
692 / 383 / 51
Регистрация: 22.01.2009
Сообщений: 1,135
У вас два раза закрывается абзац, два раза открывается заголовок(h3) и ни разу он не закрывается
Регистрация: 27.08.2009
Сообщений: 868
Если написать так, убрав теги h3, всё равно отступ сверху, как его убрать?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
1.0 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> html> head> meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> title>Моя первая страница/title> style type="text/css"> h3 < font-family:Arial; line-height: 2cm; >/style> /head> body> p >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat./p>/p> Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. /body> /html>
356 / 315 / 48
Регистрация: 21.04.2009
Сообщений: 574
Ну и чему присвается h3 .
Добавлено через 9 минут
Да и
в конце не закрывается.
Добавлено через 1 минуту
Да в конце первого обзаца
WEB-developer
898 / 729 / 80
Регистрация: 12.03.2009
Сообщений: 2,804
Записей в блоге: 2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
1.0 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> html> head> meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> title>Моя первая страница/title> style type="text/css"> h3 < font-family:Arial; line-height: 2cm; >/style> /head> body> p >h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat./h3>/p> Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. /body> /html>
Регистрация: 27.08.2009
Сообщений: 868
Последний варинат проверил, тоже не катит, отступ сверху происходит. Подскжаите ,если кто живой, как убрать отступ от верха, а между строками чтоб было расстояние 2 см?
Регистрация: 03.01.2010
Сообщений: 16
Сообщение от Syltan 
Последний варинат проверил, тоже не катит, отступ сверху происходит. Подскжаите ,если кто живой, как убрать отступ от верха, а между строками чтоб было расстояние 2 см?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
html> head> meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> title>Моя первая страница/title> style type="text/css"> h3 < font-family:Arial; margin-top:0px; margin-bottom: 2cm;>/style> /head> body> h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat./h3> span style="margin-bottom:0cm;">Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat./span> /body> /html>
Так нормально ? Если нужно чтобы текст в теге отступал заключайте текст как я написал в этот тег и вместо 0 напишите нужную величину отступа .
2773 / 341 / 22
Регистрация: 15.01.2008
Сообщений: 2,614
Сообщение от Uxenus
Моя первая страница h3 < font-family:Arial; margin-top:0px; margin-bottom: 2cm;>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
только в данном примере надо убрать отступы тега
т.к он создаёт их по умолчанию.Регистрация: 27.12.2009
Сообщений: 90
В стиль допишите, должно помочь
Регистрация: 27.08.2009
Сообщений: 868
Вот так, катит.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
html> head> meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> title>Моя первая страница/title> style type="text/css"> h3 < font-family:Arial; margin-top:0px; margin-bottom: 1cm;>/style> /head> body> h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. /body> /html>
Ещё вопросик. Скажите, почему справа теперь происходит отступ 2 см. справа? Строка доходит слева до права, от него отсупает 2 см, и переходит на след.строку. следующая строка, тоже доходит не до конца строки, а справа оставляет 2 см. Как сделать чтоб полнотью было. до конца печатало. только между строками было 2 см?
Регистрация: 03.01.2010
Сообщений: 16
Ещё вопросик. Скажите, почему справа теперь происходит отступ 2 см. справа? Строка доходит слева до права, от него отсупает 2 см, и переходит на след.строку. следующая строка, тоже доходит не до конца строки, а справа оставляет 2 см. Как сделать чтоб полнотью было. до конца печатало. только между строками было 2 см?
Происходит обычно авто-перенос слов (целое слово). Хотите заполнять текстом от края до края используйте свойство text-align:justify; — правда могут быть большие пробелы между словами .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
html> head> meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> title>Моя первая страница/title> style type="text/css"> h3 < font-family:Arial; margin-top:0px; margin-bottom: 1cm;>/style> /head> body> div style="width:500px; border:#0033CC 1px solid;text-align:justify;"> h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat./h3> /div> /body> /html>
PS
Теги нужно закрывать .. у вас не закрыт .
Добавлено через 2 минуты
Сообщение от Syltan
Скажите, как сделать,чтоб сверху не было отступа вообще, а в этом тексте, что в моём коде, чтоб между строками было ровно по 1 см, я сделал по 1 см, но от верха также происходит отступ, как его убрать, не могу понять.